「この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があれば、“その第一歩”が簡単に踏み出せます。