Webサイトやブログを運営していると、他のサイトで使われているフォントが気になることってありませんか？
僕はしょっちゅうあります。
特にデザイン面でお手本にしているサイトとかだったらなおさら知りたいですよね。
そんな時に役に立つのが、Google Chromeの拡張機能「WhatFont」です。
WhatFontを使えば、それはもう簡単に気になるサイトのフォントを調べることができます。
今回は、このWhatFontの使い方を解説しますので、気になった方はぜひ使ってみてください。
スポンサーリンク
WhatFontをGoogle Chromeに追加する
Google ChromeにWhatFontを追加しましょう。
まず、Chrome ウェブストアにアクセスします。
以下のような画面が開きますので、右上の『CHROMEに追加』ボタンをクリックしましょう。
『CHROMEに追加』ボタンをクリック
以下のようなポップアップが表示されます。
『拡張機能を追加』ボタンをクリックしましょう。
『拡張機能を追加』ボタンをクリック
これで、WhatFontの追加は完了です。
WhatFontを追加すると、検索アドレスバーの横にアイコンが表示されます。
検索アドレスバーの横にアイコンが表示される
WhatFontの使い方
それでは、このブログのトップページを例にWhatFontの使い方を解説したいと思います。
検索アドレスバーの横にあるWhatFontのアイコンをクリックしましょう。
WhatFontのアイコンをクリック
画面右上に「Exit WhatFont」というボタンが表示されます。
「Exit WhatFont」というボタンが表示される
この状態で、目的のテキストの上にマウスオーバーします。
すると、以下のようにマウスオーバーしたテキストで使われているフォントが表示されます。
テキストにマウスオーバーすると、フォントが表示される
この場合、「カテゴリー」の部分には「YuGothic」が使われているのが分かりますね。
ここでさらにテキストをクリックしてみましょう。
すると、以下のようにさらに詳しくフォントの情報が表示されます。
詳しいフォントの情報が表示される
ここでは、
- font-family
- font-style
- font-weight
- font-size
- line-height
- color
以上の情報を調べることができます。
WhatFontを終了する場合は、画面右上の『Exit WhatFont』ボタンをクリックしましょう。
『Exit WhatFont』ボタンをクリック
スポンサーリンク
まとめ
今回は、Google Chromeの拡張機能「WhatFont」の使い方を解説しました。
フォントの種類だけでなく、「Size」や「Color」などの詳細情報も簡単に調べられるスグレモノです。
Web製作者に限らず、サイトやブログを運営している方はぜひ試しに使ってみてください。
