ブラウザのフォント拡張機能 - とその限界
WhatFont や Fontanello などの拡張機能を使えば、ホバーやクリックでフォントを識別できます。比較と、URLスキャナーの方が優れている場合を説明します。
人気フォント拡張機能
WhatFont
テキストにカーソルを合わせるとフォントファミリー、サイズ、ウェイト、カラーが表示されます。最も人気のあるフォント検査拡張機能のひとつです。
Pros
- +DevTools不要
- +ホバーで即座に表示
- +ChromeとSafariで動作
Cons
- −一度に1要素のみ
- −ページ全体のインベントリなし
- −ブラウザごとにインストールが必要
Fontanello
テキストを右クリックしてフォントの詳細を確認。ChromeとFirefoxで利用可能。
Pros
- +コンテキストメニューに統合
- +わかりやすい出力
- +Firefoxで動作
Cons
- −要素ごとのみ
- −エクスポートや全インベントリなし
フォント拡張機能の共通の限界
- •拡張機能は一度に1要素しか検査できません - 全体のインベントリなし。
- •宣言されているが可視テキストに適用されていないフォントは検出できません。
- •インストールされたブラウザでのみ動作します。
- •複雑なCSS（例：条件付き @supports ルール）経由で読み込まれたWebフォントを検出できない場合があります。
URLスキャナーを使うべき場合
ウェブサイトが読み込むすべてのフォントの完全なインベントリ - @font-face、Google Fonts、Bunny Fonts、Fontshare - を取得するには、URLを以下に貼り付けてください。1回のスキャン、完全な結果、インストール不要。
よくある質問
WhatFontとは何ですか？
WhatFontはブラウザ拡張機能（Chrome、Safari）で、ホバーしたテキストのフォントファミリー、サイズ、ウェイト、カラーを表示します。素早い検索に最適ですが、一度に1要素に限定されます。
WhatFontの代替はありますか？
はい - Fontanelloは右クリックメニューでChromeとFirefoxで動作します。拡張機能なしの全ページ監査には、上のスキャナーにURLを貼り付けてください。
拡張機能はページ上のすべてのフォントを検出できますか？
いいえ。拡張機能は個々の要素を検査します。読み込まれているが現在表示されているテキストに適用されていないフォントは検出されません。URLスキャナーはすべてをキャッチします。
このツールを使用するためにインストールは必要ですか？
いいえ。URLを貼り付けるだけで、スキャナーがクラウドで作業を行います - 拡張機能、DevTools、インストール不要。