Webサイトで使われているフォントの調べ方：4つの実用的な方法

Webサイトのフォントを調べる方法を選ぶ

Webサイトで使われているフォントを調べる方法は、主に2つのケースに分かれます。選択できるライブテキストなのか、文字がすでに画像になっているのかを、まず確認してください。

最初に文字がライブHTMLか確認する

マウスやキーボードで単語を選択してみてください。ハイライト、コピー、検索ができるなら、多くの場合はライブHTMLです。ブラウザは要素、計算後のスタイル、ページが指定したフォントの候補一覧を参照できます。

選択できない文字がヒーロー画像、ロゴ、canvas、広告画像の中にあるなら、その文字は画像として扱います。ライブテキスト用の方法では、周囲の要素のフォントだけが表示され、画像の中の書体は見落とす可能性があります。

レスポンシブ表示にも注意してください。デスクトップの見出しとスマートフォンの見出しで、フォントファミリーや太さが変わることがあります。再現したい画面幅で確認しましょう。

ライブページの文字はブラウザ拡張で調べる

ライブページを調べるだけで、CSS全体の監査までは必要ない場合、フォント確認用のブラウザ拡張が最も手早いことがあります。カーソルを置いた要素のファミリー、サイズ、太さ、色などを確認できます。

1. 調べたい文字があるページを開き、コンテンツの読み込みが終わるまで待ちます。
2. 信頼できるフォント確認拡張を有効にし、見出し、ナビゲーション、ボタン、本文など対象の文字にカーソルを置きます。
3. serifやsans-serifの分類だけでなく、フォントファミリー名と太さを記録します。
4. 別の要素でも確認します。異なるフォントが表示された場合、見出しと本文で意図的に使い分けている可能性があります。

拡張機能の違いや限界を比較したい場合は、 フォント検索拡張のガイドも参考にしてください。画像から調べるべきケースも説明しています。

DevToolsでWebフォントを検証する

リニューアル、CSS監査、アクセシビリティ確認、実装作業のために根拠が必要なら、DevToolsが向いています。拡張の表示だけに頼らず、選択した要素のスタイルを直接確認できます。

1. 文字を右クリックして検証を選ぶか、DevToolsを開いて要素選択ツールを使います。
2. StylesまたはComputedでfont-familyを探し、代替フォントを含む順番を記録します。
3. font-size、font-weight、line-height、letter-spacing、text-transformも確認します。これらは見た目を大きく変えます。
4. 表示されたフォントの情報が利用できる場合は、CSSの指定と比較し、代替フォントが使われていないか確認します。

ブラウザでの技術的な確認方法は、公式の Chrome DevToolsのCSS検証ドキュメント.

Webサイトのスクリーンショットからフォントを探す

元のページを検証できない場合、文字が画像の中にある場合、デザインが画像として共有された場合は、スクリーンショット用のフォント検索が適しています。ページが変更されてしまった場合にも役立ちます。

1つの書体だけが入るように、サンプルを文字の周囲で小さく切り抜きます。複数のフォント、アイコン、写真、小さなラベルが混在するページ全体より、鮮明な見出しやボタンの1行の方が比較しやすくなります。

• 鮮明な文字を使う: a、e、g、R、tなど、繰り返し現れる字形を比較できる程度の大きさにします。
• 1つのスタイルにそろえる: 1つのファミリーを調べたいときは、太い見出しと細い本文を混ぜないでください。
• 候補として受け止める: カスタムフォントや加工された書体では、完全一致ではなく近い代替フォントが出ることがあります。

スクリーンショットがある場合は、 Website Font Detectorを開くで文字の形を照合し、似たフォントの候補を確認できます。

Webサイトのフォントを調べるときの注意点

フォント名だけでは、デザインを正確に再現できません。2つのツールの結果が違うときは、次の点を確認してください。

• 代替フォント: CSSの最初の候補が、ブラウザで実際に表示されたフォントとは限りません。
• 可変フォント: 同じファミリーでも、太さや光学サイズの設定によって見た目が変わります。
• 画像内の文字: バナー、ロゴ、canvasにラスタライズされた文字はDevToolsでは調べられません。
• 複数のコンポーネント: 見出し、UI、広告画像で別のフォントを使うデザインシステムもあります。
• ライセンス: フォントを特定しても、ダウンロードや商用利用の権利が得られるわけではありません。条件を確認してください。

精度が必要なときは、URLまたは画像、確認した要素、CSS上のファミリー、表示フォント、最も近い視覚的な候補を簡単に記録しておくと安心です。

調査結果を使えるデザイン判断に変える

ライブHTMLの技術的なフォント情報が必要ならDevToolsや拡張を使います。バナー、ロゴ、スマホ画面、保存したデザインを調べるならスクリーンショットを使います。手元の証拠に合う方法を選ぶことが、最も確実な近道です。

候補のファミリーが分かったら、同じ文字を同じ太さとサイズで比較し、クライアント案件、製品、公開サイトで使う前にライセンスを確認してください。