フォント検索拡張機能ガイド：ChromeでWebフォントを正確に調べる方法

フォント検索拡張機能が正しい選択になる場面

拡張機能が最も強いのは、元のWebページを開けて、実際のHTMLテキストにホバーまたはクリックできる場合です。ブラウザはすでにフォントスタック、計算済みサイズ、ウェイト、行間、色を把握しています。

静止画像からフォントを探す作業とは別です。ロゴ、ポスター、スクリーンショット、広告、Canva書き出し、画像化されたPDFでは、拡張機能が読むCSSがありません。この場合は視覚マッチングが必要です。

代表的なフォント検索拡張機能の比較

多くの拡張機能は基本機能が似ていますが、速さ、情報量、作業への合い方が違います。名前だけ知りたいなら軽いもの、比較作業が多いなら詳細なものを選びます。

フォント検索拡張機能の使い方

細部は違っても、基本の流れはほぼ同じです。

1. ブラウザ公式ストアから信頼できる拡張機能をインストールします。
2. 調べたいフォントがあるWebページを開きます。
3. 拡張機能を有効にし、対象テキストにホバーまたはクリックします。
4. font family、weight、size、line-height、color、fallbackを記録します。
5. 汎用フォント名だけが出た場合はDevToolsで確認します。

DevToolsでWebフォントを確認する方法

正確な書体が必要なときは、拡張機能を近道にし、DevToolsを最終確認に使います。

1. 対象テキストを右クリックして検証を選びます。
2. 表示テキストを含む要素を選択します。
3. Computedパネルでfont-familyを検索します。
4. font-size、font-weight、line-height、letter-spacingも確認します。
5. ChromeやEdgeでは、利用可能なら実際に描画されたフォント欄も見ます。

可変フォント、長いfallback、レスポンシブ指定により、端末、幅、言語、読み込み状態で見えるフォントが変わることがあります。

フォント拡張機能が使えない場面

拡張機能はDOM上のライブテキストに依存します。素材の形式で判断しましょう。

確実なフォント識別フロー

実務では1つの情報だけに頼らず、素材に合う流れで確認します。

• ライブWebページ: 拡張機能で確認し、DevToolsで計算済み・描画済みフォントを検証します。
• スクリーンショットやロゴ: 対象の単語を切り抜き、Font Detectorにアップロードします。
• PDF: 埋め込みフォントを確認し、画像化されている場合はスクリーンショットとAI検出を使います。
• 曖昧な結果: a、g、R、S、数字、線のコントラスト、字間を比較して選びます。