webサイトのフォントを調べる簡単で便利な方法まとめ

はじめに

この文書は、Webサイトに表示されているフォント（書体）を調べるための実用ガイドです。ブラウザの開発者ツールを使った確認方法から、Google Chrome拡張や画像・PDFに含まれるフォントの調べ方まで、用途に応じて選べる手順を丁寧に解説します。

何を学べるか

• 表示されているフォント名やフォールバック（代替書体）の確認方法
• ブラウザ別の具体的な手順（Chrome、Safari、Firefox）
• 拡張機能やアプリを使った簡単な調べ方
• 画像やPDFからフォントを推定するツールの使い方

対象読者

Webデザイン、ブログ運営、資料作成に関わる方や、単に気になるフォントを知りたい方まで、幅広く役立ちます。専門知識は不要で、基本的なブラウザ操作ができれば始められます。

読み方のコツ

各章は独立しているので、目的に応じて必要な章だけ参照してください。手順は実践しながら進めると理解が早まります。

注意点

表示されるフォント名が必ずしも商用利用可能とは限りません。使用前にライセンスを確認してください。したがって、見つけたフォントを使う際は権利関係を確認する習慣をつけましょう。

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

概要

Webページのフォントを調べる方法は大きく分けて2つあります。1つはブラウザに備わる開発者ツールを使う方法、もう1つは拡張機能（例：WhatFont）を使う方法です。それぞれ利点があり、目的に応じて使い分けると便利です。

方法1：ブラウザの開発者ツールで調べる

開発者ツールはページ上の要素を直接確認できます。テキストを選んでスタイルを表示すれば、font-familyやフォントサイズ、行間などの情報がわかります。詳しい手順は第3章以降で各ブラウザごとに説明しますが、素早く正確に情報を得たいときに向いています。

方法2：拡張機能 WhatFont を使う

WhatFontは導入すると画面上でカーソルを当てるだけでフォント名がポップアップ表示されます。手軽さが最大の利点で、デザインを確認するときに便利です。ただし、表示名が必ずしも実際のフォントファイル名と一致しない場合があります。

使い分けの目安

• 細かいプロパティ（フォントスタックやレンダリング）を知りたい：開発者ツール
• 速くフォント名を確認したい：WhatFont

注意点

ライセンスや商用利用の可否は表示されないため、商用で使う場合は必ず元のフォントの出所を確認してください。

ブラウザの開発者ツールを使う方法

概要

ブラウザに備わる開発者ツールは、Webページで実際に使われているフォントを最も正確に教えてくれます。手順は似ているので、どのブラウザでも基本は「要素を選んで表示を確認する」です。

共通の基本操作

1. 調べたい文字の上で右クリックして「検証」または「要素を検査」を選びます。\n2. Elements（要素）パネルで該当の要素を選びます。\n3. Styles（スタイル）かComputed（計算済み）を確認してfont-familyなどのプロパティを見ます。\n

Google Chrome

Elementsで要素を選ぶと、右側のパネルにStylesとComputedがあります。Computed内のFontsタブを開くと「Rendered Fonts」として実際に使われたフォント名、フォントファイルのURL、フォールバック情報が出ます。どのフォントファイルが読み込まれたかも分かります。

Safari

SafariのWebインスペクタでもElementsを選択後、右側にStylesとComputedが出ます。ComputedのFonts欄で使用フォントとそのソース（システムかWebフォントか）を確認できます。表示が見当たらない場合は要素を直接選び直してください。

Firefox

FirefoxのInspectorには専用のFontsタブがあります。ここでレンダリングされたフォント、フォントのフォールバック順、フォントの形式（WOFFなど）、@font-faceの情報を確認できます。Rulesパネルで該当のCSSルールをすぐに辿れます。

見るべきポイント

• font-familyだけでなく、実際にレンダリングされたフォント名を確認すること。\n- Webフォントの場合は読み込まれたファイルURLをチェックすると特定しやすいです。\n- 擬似要素や遅延読み込みで見逃すことがあるので、必要ならページを再読み込みして確認してください。

Google Chromeでの調べ方

準備

1. 確認したいページをChromeで開きます。テキスト上で右クリックして「検証」を選ぶか、開発者ツールを開いてください（WindowsはCtrl+Shift+I、Macは⌘+Option+I）。

テキストを直接調べる方法

1. 調べたい文字列を右クリックして「検証」を選ぶと、Elementsパネルでその要素がハイライトされます。
2. 右側のパネルで「Styles（スタイル）」を探し、font-familyの指定を確認します。ここに表示されたフォント名がCSSで指定された順になります。

要素選択ツールを使う方法

1. 開発者ツール左上の要素選択アイコン（マウスカーソルの形）をクリックします。ページ上で調べたい箇所をクリックすると、該当要素がElementsに切り替わります。
2. 右側の「Fonts」または「Computed（計算スタイル）」内の「Rendered Fonts（レンダリングされたフォント）」を確認してください。ここには実際に描画されているフォント名、サイズ、ウェイト、出典（ローカルか外部か）などが表示されます。

Webフォントの読み込み状況を確認する

1. Webフォントかどうか知りたい場合は、Networkタブを開いてフィルタを”Font”にすると、読み込まれたフォントファイルが表示されます。ファイル名やURLからどのフォントが読み込まれたか確認できます。

注意点とコツ

• font-familyに複数指定がある場合、ブラウザは上から順に使えるフォントを選びます。ComputedやRendered Fontsで最終的に使われたフォント名を確認してください。
• 要素によっては祖先要素のフォント指定を継承します。該当要素で見つからないときは、上位の要素をたどって確認しましょう。
• アイコンフォントや疑似要素(::before, ::after)は別の指定がされることがあります。必要ならそれらも選択して調べてください。

Safariでの調べ方

開発メニューを有効にする

Safariでフォントを調べるには、まず開発メニューを表示します。Safariのメニューから「環境設定」→「詳細」を開き、「メニューバーに“開発”メニューを表示」にチェックを入れてください。これで検査ツールが使えるようになります。

Webインスペクタ（検査ツール）の開き方

調べたいテキスト上で右クリックして「要素を検証」を選ぶか、ショートカットのOption(⌥)+Command(⌘)+IでWebインスペクタを開きます。画面右側に要素ツリーとスタイル情報が表示されます。

テキストのフォント情報を確認する

要素を選ぶと、右側のサイドバーに「Styles（スタイル）」と「Computed（計算済み）」が見えます。Computedを選び、font-family、font-size、font-weightなどを確認してください。Safariは使用中の実際のフォント名を表示する場合があり、どのフォントがレンダリングされているか分かりやすいです。

ウェブフォントやファイルを調べる方法

Webインスペクタの「Resources（リソース）」または「Network（ネットワーク）」タブで読み込まれたフォントファイル（.woff/.woff2/.ttf）を探せます。CSS内の@font-faceルールを確認すると、どのURLからフォントを読み込んでいるかが分かります。

便利なヒント

• 要素を選んで右クリック→「Copy」→「Copy Declaration」でfont-familyの宣言をコピーできます。
• システムフォントやアイコンフォントは名前だけでは判別しにくいので、読み込まれたファイルを確認してください。
• ショートカットはMac標準のため、慣れると素早く調べられます。

Firefoxでの調べ方

Firefoxには専用の「Fonts」パネルがあり、選択中の要素で使われているフォントを詳しく確認できます。以下は分かりやすい手順と使い方です。

手順（開発者ツールを開く）

1. 調べたいページで要素を右クリックして「検証」を選ぶ、またはF12 / Ctrl+Shift+I（macはCmd+Opt+I）を押します。
2. Inspector（要素パネル）を開き、右側にあるタブ群の中から「Fonts」を選びます。

Fontsパネルで確認できること

• 実際にレンダリングされているフォント名（最終的に選ばれたフォント）
• font-size、line-height、font-weight、font-styleなどの詳細
• 指定されたフォールバック順（font-familyのリスト）
• @font-faceで読み込まれたフォントなら、フォントファイルのURLや形式を確認・開くことが可能
• サンプルテキストやグリフ、使用されている文字セットのプレビュー

サイト全体で使われているフォント一覧を表示する

Fontsパネル内には、その要素だけでなく「ページで使用されているフォント」や似た一覧表示があり、ページ全体で使われているフォントを一覧で見られます。見つからない場合はInspectorのタブを左右にスクロールして探してください。

実務でのポイント

• Computedタブと組み合わせると、最終的なフォント決定の理由（どのルールが勝ったか）が分かります。
• フォントファイルのURLはNetworkパネルでも確認でき、読み込み状況やサイズをチェックできます。

この方法で、Firefoxの開発者ツールを使って簡単かつ正確にフォント情報を把握できます。

共通のショートカットキー

概要

主要なブラウザで共通して使える開発者ツールのショートカットを紹介します。まずはキーを押して開く方法を覚えると、調べたい要素へ素早くアクセスできます。

Windows

• 開発者ツールを開く: Ctrl + Shift + I
• 要素選択モード（画面上の要素をクリックしてHTML/CSSを確認）: Ctrl + Shift + C
• 代替: F12でも開くことが多いです。

Mac

• 開発者ツールを開く／要素選択に入る: Command + Shift + C
• 別の組み合わせ（Command + Option + I / Command + Option + C）を使う環境もあります。使えない場合は後述の対処を試してください。

ちょっとしたコツ

• ショートカットが効かないときは、ブラウザの拡張機能やOS側のキーボード設定で競合している可能性があります。拡張機能を無効にして確かめてください。
• 右クリック→「検証（Inspect）」でも開けます。要素選択モードで画像やテキストをクリックすると、該当するHTMLとスタイルが表示されます。
• 開発者ツールはレスポンシブ表示やネットワークの確認にも使えます。最初はキー操作で素早く開く習慣をつけると便利です。

Chrome拡張機能「WhatFont」を使う方法

概要

Chrome拡張のWhatFontを使うと、ページ上の文字を手軽に調べられます。インストールしてアイコンを押すだけで、フォント名や大きさなどの情報を確認できます。

インストール手順

1. Chromeウェブストアで「WhatFont」を検索します。
2. 「Chromeに追加」をクリックして拡張機能をインストールします。
3. ブラウザ右上にWhatFontのアイコンが表示されます。

基本的な使い方

1. 調べたいページを開き、WhatFontのアイコンをクリックして有効化します。カーソルが変わります。
2. 調べたい文字の上にホバーすると、ツールチップでフォント名が表示されます。
3. クリックすると詳細パネルが表示され、フォントファミリー、スタイル（太さ）、サイズ、色、行間、CSSのフォントスタック、フォントの提供元リンク（あれば）などが確認できます。
4. 表示されたフォント名をコピーして他のツールやメモに貼り付けられます。

注意点と便利な使い方

• 動的に読み込まれるフォントやiframe内のフォントは正しく検出できないことがあります。ページを完全に読み込んでから使ってください。
• 擬似要素（::beforeや::after）や画像化された文字は検出できません。
• 詳細なCSS確認が必要な場合は、WhatFontで名前を確認した後にブラウザの開発者ツールを開くと確実です。

以上がWhatFontの基本的な使い方です。直感的で初心者にも使いやすいので、気軽に試してみてください。

画像やPDFのフォントを調べる方法

概要

画像やPDFに含まれるフォントは、Web上のテキストと違って直接確認できません。ここでは画像検索系のツールとアプリを使う基本的な手順と、PDF特有の注意点をわかりやすく説明します。

1. Adobe Fonts（画像検索機能）

• 手順: Adobe Fontsの画像検索ページで画像をアップロードし、文字部分を選択します。候補が一覧で表示されます。
• 特徴: 欧文の判別に強く、類似フォントも提示してくれます。
• 注意点: 文字が小さい・歪んでいる・装飾が強い場合は正確に判別できないことがあります。

2. MOJICITY（日本語フォント特化）

• 手順: スマホで写真を撮るか画像を読み込み、文字を認識して候補を表示します。
• 特徴: 日本語フォントに特化しているため、和文書体の候補精度が高めです。
• コツ: 文字をトリミングして余白を減らすと精度が上がります。

3. Adobe Capture

• 手順: アプリで文字を撮影→Type機能で解析→近いフォントを表示します。解析結果をライブラリに保存できます。
• 特徴: Adobeのエコシステムと連携しやすく、デザインワークにそのまま取り込めます。
• 補足: 手書き風や極端に加工された書体は判別が難しいです。

PDFの特別な注意点

• テキストレイヤーが残っていれば、PDFビューアでフォント名を確認できます。
• テキストがアウトライン化（図形化）されていると、画像として扱う必要があります。
• スキャンPDFはまずOCRをかけてテキストを抽出すると作業が楽になります。

確認と利用のポイント

• 候補が出たら、フォント名で検索して見本を比べてください。
• 商用利用する場合は必ずライセンスを確認してください。
• どうしても一致しないときは、複数ツールで確認したり、コミュニティに相談すると見つかることがあります。

Adobe Fontsの画像検索機能

概要

Adobe Fontsには画像内の文字を元に似たフォントを探す「画像検索」機能があります。写真やスキャンした文字をアップロードして、候補フォントを一覧で確認できます。使い方は簡単で、フォントの候補から目的のものを見つけたら追加（アクティベート）できます。

手順（基本）

1. Adobe Fontsのサイトにアクセスし、Adobeアカウントでサインインします。
2. 画像検索（Find from image や Image Search）のページを開きます。
3. 調べたい画像をアップロードし、フォントのある部分をドラッグで選択します。
4. 検索ボタンを押すと、似たフォントが一覧表示されます。
5. 気に入ったフォントを選び、「追加」や「アクティベート」をクリックして使用可能にします。

使うときのポイント

• 文字がはっきり写った画像を使うと精度が上がります。背景がごちゃごちゃしていると誤認識しやすいです。
• なるべく横向きで、1行程度にトリミングすると良い結果が出やすいです。
• 著作権や利用許諾には注意してください。商用利用はフォントのライセンス条件を確認してから行ってください。

MOJICITYアプリ

概要

MOJICITYは日本語フォントに特化した検索ツールです。画像をアップロードして、写っている文字から近いフォント名を探せます。印刷物やロゴ、スクリーンショットのフォントを確認したいときに便利です。

基本の使い方（手順）

1. アプリを起動し「画像を選択」またはカメラを選びます。
2. 調べたい文字が写った部分をトリミングします。1文字〜数文字が見やすいように切り出すと精度が上がります。
3. 認識ボタンを押すと解析が始まり、候補フォントの一覧が表示されます。
4. 各候補を選ぶと、同じ文字で表示したプレビューや類似フォントが見られます。

コツと注意点

• 高解像度でコントラストの高い画像を使うと正確に判定できます。背景がごちゃごちゃしていると誤認識しやすいです。
• 筆文字や崩し字、極端に装飾された文字は候補が出にくい場合があります。その場合は別の文字や別角度の画像も試してください。
• 検索結果は“候補”です。商用利用の際は必ずライセンスを確認してください。

使い分けのヒント

単体の文字や見出しのフォント確認には特に向いています。複数の文字や本文フォントを調べたいときは、読みやすい部分を切り出して個別に解析すると良いです。

Adobe Capture

概要

Adobe Captureはスマートフォンで撮った写真からフォントの候補を探せるアプリです。看板やポスターなど街で見かけた文字を撮影すると、似たフォントを自動で提案します。結果はAdobe FontsやCreative Cloudライブラリと連携して扱えます。

主な特徴

• 画像から文字領域を選んで解析し、類似フォントを表示します。
• トリミングや傾き補正ができ、読み取り精度を上げられます。
• 検出結果はそのままライブラリへ保存・共有できます。
• iOS/Android対応でスピーディに検索できます。

使い方（簡単な手順）

1. アプリを起動し、写真を撮るか画像を読み込みます。
2. 文字が写っている領域をトリミングします。横書きで、読みやすい文字を選ぶと精度が上がります。
3. 「フォント」または「テキスト」解析を実行すると候補が表示されます。
4. 気に入った候補はAdobe Fontsで確認し、ライブラリへ保存します。

利用シーンの例

• 街の看板やカフェのロゴを真似したいときの参考にできます。
• デザインの方向性を決めるとき、似た書体を素早く集められます。
• 協働作業でライブラリを共有し、チームの素材として使えます。

注意点

• 写真の解像度や陰影、装飾がある文字は誤認識しやすいです。なるべく文字がはっきり見える写真を使ってください。
• 完全に同一のフォントが見つからない場合があります。商用利用の際はライセンスを必ず確認してください。

まとめ

以下は本書で紹介したフォント調査法の要点と実践的な使い分けです。

• 目的別の選び方
• 詳細な情報（フォントファミリー、重み、表示元など）が必要な場合は、ブラウザの開発者ツールを使って直接確認します。正確なCSSプロパティや読み込まれているフォントファイル名がわかります。
• 手早く調べたい場面では、Chrome拡張のWhatFontが便利です。要素にカーソルを合わせるだけでフォント名が表示されます。

• 画像やPDFのフォント判定には、Adobe Fontsの画像検索、Adobe Capture、MOJICITYのような専用ツールを使います。高解像度のトリミング画像が結果を良くします。

• 実践的な注意点

• フォント名がわかっても、商用利用にはライセンス確認が必要です。配布元（Google Fonts、Adobe Fontsなど）で確認してください。
• Webページではフォールバック指定や読み込み方法も確認すると再現性が高まります。

どの方法も一長一短があります。作業の目的と手間に応じて使い分けると効率よく調査できます。