全フォント一覧は任意のウェブページをスキャンし、使用されているすべてのフォントファミリーの完全なインベントリを表示します。CDN から読み込まれたウェブフォント、セルフホストフォント、システムフォントのフォールバックまでを網羅し、各フォントにはライブテキストプレビュー・読み込まれたウェイトとスタイル・使用要素数・CSS の font-family 宣言をワンクリックでコピーする機能が含まれます。
気に入ったウェブサイトのフォントを特定するには、以前は DevTools で要素を一つひとつ調べて計算済みの font-family プロパティを確認するか、一度に1つのフォントしか検出できないブラウザ拡張機能を使うしかありませんでした。全フォント一覧は一つの画面で完全な情報を提供します。ページに読み込まれて使用されているすべてのフォントと、各フォントの実際のレンダリングを示すライブテキストサンプルを一覧表示します。このツールはウェブフォント（@font-face や Google Fonts 経由で読み込まれたもの）とシステムフォント（Arial・Helvetica・Georgia など）を区別し、完全な font-family スタックを表示します。各フォントについて、読み込まれているウェイト（400・600・700）・使用している要素・適用されているフォントサイズを確認できます。任意のフォントをクリックすると CSS 宣言がコピーされ、自分のプロジェクトにそのまま貼り付けられます。ライブプレビューは汎用プレビューではなく、ページ上の実際のフォントレンダリングを使用しているため、そのサイトで使われているサイズとウェイトでフォントがどのように見えるかを正確に確認できます。
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 に貼り付け、同じソースからフォントを読み込んで自分のプロジェクトで使用します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
