Chrome & Firefox DevToolsでフォントを見つける方法

ブラウザのDevToolsを使用すると、任意の要素にレンダリングされた正確なフォントを検査できます。使い方と、URLスキャナーが速い選択肢となる場合を解説します。

Chrome DevTools - レンダリングされたフォント

1任意のテキストを右クリックして「検証」を選択します（またはCtrl+Shift+I / Cmd+Option+Iを押します）。
フルスクリーンショットを表示
テキストを右クリックして「検証」をクリック
2Chromeが要素パネルを開き、クリックした要素がDOMツリーでハイライトされます。
3右パネルで「Computed」タブをクリックします（「Styles」の隣の2番目のタブ）。
4CSSプロパティの下にスクロールして「Rendered Fonts」セクションを見つけます。
フルスクリーンショットを表示
Computedタブ - 「Rendered Fonts」までスクロールしてアクティブな書体を確認
5ブラウザが使用した正確な書体、読み込まれたソースファイル、使用されたグリフ数が表示されます。

1任意のテキストを右クリックして「検証」を選択します（またはF12を押します）。インスペクターパネルが開きます。
2インスペクターの右パネル（通常ルールと計算済みが表示される場所）で「フォント」タブをクリックします。
3左の列にページで読み込まれたすべてのフォントが一覧表示されます。フォント名をクリックするとスペシメン、ウェイト範囲、フォーマット、ソースURLが確認できます。
フルスクリーンショットを表示
Firefoxフォントタブ - ページのすべてのフォントが左に一覧表示され、詳細が右に表示

DevToolsは個々の要素の検査には優れていますが、ページで読み込まれるすべてのフォントの完全な一覧は提供されません。完全な監査のためには、以下にURLを貼り付けてください。

任意のURLを貼り付けると、使用されているすべてのウェブフォントの完全なリストが一度のスキャンで取得できます - すべての@font-face、Google Fonts、CDNリンクを含みます。

ChromeのRendered Fontsとは何ですか？

Rendered Fontsは、選択したテキストを描画するためにブラウザが実際に使用した書体を表示します - font-familyのフォールバックを適用した後の結果です。CSS font-family宣言とは異なる場合があります。

なぜレンダリングされたフォントがCSS font-familyと異なるのですか？

font-familyは優先順位付きフォールバックリストです。最初のフォントの読み込みに失敗すると、ブラウザは次の候補に移ります。Rendered Fontsは実際に使用されたものを表示します。

DevToolsでページのすべてのフォントを見つけることができますか？

Firefoxのフォントタブはページで読み込まれたすべてのフォントを表示します。Chromeでは要素を一つずつ検査する必要があります。完全な一覧には上記のURLスキャナーを使用してください。

URLスキャナーはGoogle Fontsも検出しますか？

はい - すべてのフォントソースが検出されます：Google Fonts、Bunny Fonts、Fontshare、自己ホスト型@font-faceフォント。