「このWebサイト、フォントが見やすくておしゃれ。何のフォントを使ってるんだろう？」
そんな疑問を持ったことはありませんか？
実は、Google Chromeの拡張機能「WhatFont」を使えば、ワンクリックでWebサイトのフォント情報を確認できます。
この記事では、WhatFontの導入方法・使い方・さらには調べたフォントを自分のサイトに反映する方法まで、実用的な使い方をまとめました。
WhatFontとは？｜Webページのフォントを簡単に判別できるChrome拡張機能
「WhatFont」は、Web上の文字にマウスをかざすだけで、そのフォント名・サイズ・スタイル・カラーなどを表示してくれるChromeの無料拡張機能です。
- HTMLやCSSを見なくてもOK
- 視覚的にフォントがわかる
- 複数のWebページで気軽に比較できる
Webデザインの参考にしたいときや、フォント選定で悩んでいるときに非常に役立ちます。
WhatFontのインストール方法（1分で完了）
たったこれだけで、フォント調査ツールが使えるようになります。
WhatFontの使い方｜クリックだけでフォント情報が表示される
調べたいWebページを開きます。
拡張機能を有効化します。
フォント名がポップアップで表示されます。
以下のような情報が表示されます。
- フォント名（font-family）
- サイズ（font-size）
- ウェイト（太さ）
- カラーコード
- 行の高さ（line-height）
実際の使用例を見ることで、フォントの組み合わせやバランス感の参考にもなります。
【応用】気に入ったフォントを自分のWebサイトに使いたいときは？
たとえば「Noto Sans JP」や「Roboto」など、WhatFontで気に入ったフォントを見つけたら、WordPressサイトで簡単に使える方法があります。
「Google Fonts Typography」を使えば簡単です。
手順：
- WordPress管理画面 ＞ プラグイン ＞ 新規追加
- 「Google Fonts Typography」で検索し、インストール＆有効化
- 外観 ＞ カスタマイズ ＞ Googleフォント設定へ
主なカスタマイズ項目：
- 本文フォントの変更
- 見出し（h1～h6）のフォント指定
- フォントの太さ・スタイル
- モバイル表示に合わせた調整
CSS不要で簡単に反映できます。
フォントを知ることで、デザインの見え方が変わる
フォントは、Webサイトの印象を左右する非常に重要な要素です。
- フォーマルに見せたいときは「Serif系」
- 親しみやすくしたいときは「Rounded系」
- スタイリッシュにしたいときは「Sans-serif系」
など、選ぶフォントによってブランドの印象・読みやすさ・ユーザーの行動が変わることもあります。
WhatFontを活用すれば、「なぜこのサイトは読みやすいのか？」という視点でWebを観察するクセがつき、自然とデザイン力も磨かれていきます。
まとめ｜WhatFontはWebデザインの“観察眼”を育てるツール
- WhatFontは、Webページのフォント情報を瞬時に可視化できるChrome拡張機能
- 操作は簡単、インストールから判別まで数クリックで完了
- 調べたフォントをWordPressに導入することも可能
「このサイトの雰囲気、真似したい」と思ったら、まずはフォントからチェックしてみましょう。
WhatFontがあれば、“その第一歩”が簡単に踏み出せます。