全フォント一覧は任意のウェブページをスキャンし、使用されているすべてのフォントファミリーの完全なインベントリを表示します。CDN から読み込まれたウェブフォント、セルフホストフォント、システムフォントのフォールバックまでを網羅し、各フォントにはライブテキストプレビュー・読み込まれたウェイトとスタイル・使用要素数・CSS の font-family 宣言をワンクリックでコピーする機能が含まれます。
気に入ったウェブサイトで使われているフォントを特定するには、これまで DevTools で要素を1つずつ検査して計算後の font-family プロパティを確認するか、一度に1つのフォントしか検出できないブラウザ拡張機能を使う必要がありました。List All Fonts はページ上で読み込まれ使用されているすべてのフォントを、実際にそのフォントがどう表示されるかを示すライブテキストサンプルとともに、1つの画面で完全に把握できるようにします。
このツールは Web フォント(@font-face や Google Fonts で読み込まれたもの)とシステムフォント(Arial、Helvetica、Georgia など)を区別し、font-family のスタック全体を表示します。各フォントについて、読み込まれているウェイト、使用している要素、適用されているフォントサイズを確認できます。任意のフォントをクリックすれば、そのまま自分のプロジェクトに貼り付けられる CSS 宣言をコピーできます。
バリアブルフォント——ウェイトごとに個別のファイルを用意するのではなく、1つのフォントファイルで幅広いウェイトや幅をカバーするもの——は、単一の固定ウェイトとしてではなく、バリアブルフォントとして識別され、対応する軸の範囲が表示されます。ライブプレビューは汎用的なプレビューではなくページ上での実際のフォントレンダリングを使用するため、サイト上で使われているサイズとウェイトでそのフォントがどう見えるかを正確に確認できます。
Google Fonts・Adobe Fonts・カスタム @font-face 宣言からのウェブフォント、システムフォントのフォールバックを含め、ページ上で実際にレンダリングされているすべての font-family を一覧表示します。見つかった固有フォントファミリーの総数を表示します。
各フォントはページに読み込まれた実際のフォントファイルを使ってレンダリングされたライブテキストサンプル（「The quick brown fox jumps over the lazy dog」）で表示されます。汎用プレビューではなく、実際のレンダリングが確認できます。
各フォントについて、読み込まれているウェイト（Regular 400・Medium 500・SemiBold 600・Bold 700）と italic バリアントが利用可能かどうかを確認できます。フォントの読み込まれたサブセットを把握するのに役立ちます。
ページ上で各フォントを使用している要素の数を表示します。最も使われているフォントが先頭に表示されます。どのフォントが主要（本文テキスト）で、どれが補助的（少数の要素のみで使用）かを把握できます。
任意のフォントエントリをクリックすると、完全な CSS の font-family 宣言（例：font-family: 'Inter', sans-serif）がクリップボードにコピーされます。スタイルシートに直接貼り付けられる状態でコピーされます。
各フォントのソースが表示されます：Google Fonts（特定の URL 付き）・Adobe Fonts・セルフホスト（@font-face の URL 付き）・システムフォント。各フォントの出所を正確に把握できます。
美しいタイポグラフィのウェブサイトを訪問して、使われているすべてのフォントを即座に確認します。名前・ウェイト・出所がわかるため、「このフォントは何だろう？」と推測したり、信頼性の低いフォント識別ツールを使ったりする必要がなくなります。
ページで読み込んでいるフォントはいくつありますか？ダウンロードされているのに適用されていない未使用のフォントはありませんか？全フォント一覧は実際の使用状況を表示します。読み込まれたフォントの使用要素数が0なら、それは無駄な帯域幅です。
各ページで全フォント一覧を実行してプロジェクトのタイポグラフィをドキュメント化します。正しいフォントとウェイトがサイト全体で一貫して使われていることを確認し、不正な font-family 宣言を検出できます。
気に入ったフォントを見つけたものの有料フォントだった場合、フォント名をコピーして同様の特徴を持つ無料の代替フォントを検索します。ライブプレビューがあるため、そのフォントの見た目を正確に覚えておくことができます。
異なるブラウザで同じページの全フォント一覧を実行して、どこでも同じフォントがレンダリングされているか確認します。システムフォントスタックはオペレーティングシステムによって解決方法が異なるため、不整合を検出できます。
DevSuite Pro のフローティングドックを開き、全フォント一覧アイコンをクリックします。ツールがページの計算済みスタイルと @font-face ルールをスキャンします。
ページで見つかったすべてのフォントが使用頻度順に並んだパネルが表示されます。各エントリにはフォント名・プレビューテキスト・ウェイト・要素数が表示されます。
ライブプレビューをスクロールして各フォントのレンダリングを確認します。ページの見出しフォント・本文フォント・アクセントフォントを比較できます。
任意のフォントエントリをクリックして font-family CSS 宣言をコピーします。ソースリンクをクリックするとフォントの出所（Google Fonts ページ・CDN の URL など）にアクセスできます。
font-family 宣言を CSS に貼り付け、同じソースからフォントを読み込んで自分のプロジェクトで使用します。
