Webサイトのフォントを調べるなら「WhatFont」が便利!Chrome拡張で一発確認

「このWebサイト、フォントが見やすくておしゃれ。何のフォントを使ってるんだろう?」

そんな疑問を持ったことはありませんか?

実は、Google Chromeの拡張機能「WhatFont」を使えば、ワンクリックでWebサイトのフォント情報を確認できます。

この記事では、WhatFontの導入方法・使い方・さらには調べたフォントを自分のサイトに反映する方法まで、実用的な使い方をまとめました。

目次

WhatFontとは?|Webページのフォントを簡単に判別できるChrome拡張機能

「WhatFont」は、Web上の文字にマウスをかざすだけで、そのフォント名・サイズ・スタイル・カラーなどを表示してくれるChromeの無料拡張機能です。

  • HTMLやCSSを見なくてもOK
  • 視覚的にフォントがわかる
  • 複数のWebページで気軽に比較できる

Webデザインの参考にしたいときや、フォント選定で悩んでいるときに非常に役立ちます。

WhatFontのインストール方法(1分で完了)

STEP
Google Chromeを開く
STEP
STEP
「WhatFont」で検索
STEP
「Chromeに追加」→「拡張機能を追加」
STEP
ブラウザ右上に「f?」アイコンが表示されればOK

たったこれだけで、フォント調査ツールが使えるようになります。

WhatFontの使い方|クリックだけでフォント情報が表示される

STEP
Webサイトにアクセス

調べたいWebページを開きます。

STEP
右上の「f?」アイコンをクリック

拡張機能を有効化します。

STEP
調べたい文字にカーソルをあわせる

フォント名がポップアップで表示されます。

STEP
さらにクリックで詳細を確認

以下のような情報が表示されます。

  • フォント名(font-family)
  • サイズ(font-size)
  • ウェイト(太さ)
  • カラーコード
  • 行の高さ(line-height)

実際の使用例を見ることで、フォントの組み合わせやバランス感の参考にもなります。

【応用】気に入ったフォントを自分のWebサイトに使いたいときは?

たとえば「Noto Sans JP」や「Roboto」など、WhatFontで気に入ったフォントを見つけたら、WordPressサイトで簡単に使える方法があります。

「Google Fonts Typography」を使えば簡単です。

手順:

  1. WordPress管理画面 > プラグイン > 新規追加
  2. 「Google Fonts Typography」で検索し、インストール&有効化
  3. 外観 > カスタマイズ > Googleフォント設定へ

主なカスタマイズ項目:

  • 本文フォントの変更
  • 見出し(h1~h6)のフォント指定
  • フォントの太さ・スタイル
  • モバイル表示に合わせた調整

CSS不要で簡単に反映できます。

フォントを知ることで、デザインの見え方が変わる

フォントは、Webサイトの印象を左右する非常に重要な要素です。

  • フォーマルに見せたいときは「Serif系」
  • 親しみやすくしたいときは「Rounded系」
  • スタイリッシュにしたいときは「Sans-serif系」

など、選ぶフォントによってブランドの印象・読みやすさ・ユーザーの行動が変わることもあります。

WhatFontを活用すれば、「なぜこのサイトは読みやすいのか?」という視点でWebを観察するクセがつき、自然とデザイン力も磨かれていきます。

まとめ|WhatFontはWebデザインの“観察眼”を育てるツール

  • WhatFontは、Webページのフォント情報を瞬時に可視化できるChrome拡張機能
  • 操作は簡単、インストールから判別まで数クリックで完了
  • 調べたフォントをWordPressに導入することも可能

「このサイトの雰囲気、真似したい」と思ったら、まずはフォントからチェックしてみましょう。
WhatFontがあれば、“その第一歩”が簡単に踏み出せます。

もしよろしければシェアお願いいたします。
目次