Webサイトのフォントを簡単に調べられる「WhatFont」の使い方

Webサイトのフォントを簡単に調べられる「WhatFont」の使い方

Webサイトやブログを運営していると、他のサイトで使われているフォントが気になることってありませんか?
僕はしょっちゅうあります。

特にデザイン面でお手本にしているサイトとかだったらなおさら知りたいですよね。

そんな時に役に立つのが、Google Chromeの拡張機能「WhatFont」です。

WhatFontを使えば、それはもう簡単に気になるサイトのフォントを調べることができます。

今回は、このWhatFontの使い方を解説しますので、気になった方はぜひ使ってみてください。
 
 

スポンサーリンク

WhatFontをGoogle Chromeに追加する

Google ChromeにWhatFontを追加しましょう。

まず、Chrome ウェブストアにアクセスします。

以下のような画面が開きますので、右上の『CHROMEに追加』ボタンをクリックしましょう。

『CHROMEに追加』ボタンをクリック

『CHROMEに追加』ボタンをクリック

 
 
以下のようなポップアップが表示されます。
拡張機能を追加』ボタンをクリックしましょう。

『拡張機能を追加』ボタンをクリック

『拡張機能を追加』ボタンをクリック

 
 
これで、WhatFontの追加は完了です。
WhatFontを追加すると、検索アドレスバーの横にアイコンが表示されます。

検索アドレスバーの横にアイコンが表示される

検索アドレスバーの横にアイコンが表示される

 
 

WhatFontの使い方

それでは、このブログのトップページを例にWhatFontの使い方を解説したいと思います。

検索アドレスバーの横にあるWhatFontのアイコンをクリックしましょう。

WhatFontのアイコンをクリック

WhatFontのアイコンをクリック

 
 
画面右上に「Exit WhatFont」というボタンが表示されます。

「Exit WhatFont」というボタンが表示される

「Exit WhatFont」というボタンが表示される

 
 
この状態で、目的のテキストの上にマウスオーバーします。
すると、以下のようにマウスオーバーしたテキストで使われているフォントが表示されます。

テキストにマウスオーバーすると、フォントが表示される

テキストにマウスオーバーすると、フォントが表示される

 
 
この場合、「カテゴリー」の部分には「YuGothic」が使われているのが分かりますね。

ここでさらにテキストをクリックしてみましょう。
すると、以下のようにさらに詳しくフォントの情報が表示されます。

詳しいフォントの情報が表示される

詳しいフォントの情報が表示される

 
 
ここでは、

  • font-family
  • font-style
  • font-weight
  • font-size
  • line-height
  • color

 
以上の情報を調べることができます。

リンゴ
ソースコードを見なくても、ここまで調べられるなんて便利ですよね。
 
 
WhatFontを終了する場合は、画面右上の『Exit WhatFont』ボタンをクリックしましょう。

『Exit WhatFont』ボタンをクリック

『Exit WhatFont』ボタンをクリック

 
 

スポンサーリンク

まとめ

今回は、Google Chromeの拡張機能「WhatFont」の使い方を解説しました。

フォントの種類だけでなく、「Size」や「Color」などの詳細情報も簡単に調べられるスグレモノです。
Web製作者に限らず、サイトやブログを運営している方はぜひ試しに使ってみてください。

リンゴ
気になるサイトの気になるフォントをチェックしてみましょう!

スポンサーリンク








Webサイトのフォントを簡単に調べられる「WhatFont」の使い方