Webサイト フォント抽出ツール.

フォント抽出ツールとは？

フォント抽出ツールとは、Webページで使われている書体を見つけ出し、その裏にあるフォントファイルへ直接アクセスできるオンラインツールです。見た目からフォント名を推測する代わりに、リンクを貼るだけで、サイトが読み込んでいるフォントファミリー、ウェイト、スタイル、ファイル形式の正確な一覧が得られます。FontExtractorは、これを数秒で行う無料のWebサイト フォント抽出ツールで、ライブプレビューとワンクリックダウンロードにも対応しています。

最近のWebサイトは、どのパソコンにも入っている数種類のフォントだけに頼ることはほとんどありません。Google Fonts、Adobe Fonts、CDN、あるいはサイト自身のサーバーから、CSSの @font-face ルールでカスタムWebフォントを読み込んでいます。これらのルールは多数のスタイルシート、入れ子になった @import、インラインの <style> タグに分散しているため、手作業で探すのは大変です。フォント抽出ツールなら、それらをすべて自動で読み取ります。

FontExtractorの概要

URLからフォントを抽出する手順

URLからのフォント抽出は1分もかかりません。

1. 調べたいページのアドレスをコピーします。トップページに限らず、公開されているページならどこでも構いません。
2. このページ上部の入力欄に貼り付けて、フォントを抽出を押します。https:// は省略しても自動で補完されます。
3. 結果を確認します。各フォントファミリーがカードとして、そのフォント自身で表示され、下にすべてのウェイトとスタイルが並びます。
4. プレビュー欄に好きなテキストを入力し、サイズを調整して、見出しや本文でどう見えるかを確かめます。
5. ダウンロードまたはコピー。ファイルを個別に保存するか、fonts.css 付きのZIPで一括ダウンロード、または1ファミリー分の @font-face CSSをコピーできます。

Webサイト フォント抽出ツールはどのフォントを検出できますか？

FontExtractorは、ページがHTMLとCSSで宣言しているフォントを検出します。セルフホストのファイル、Google Fonts、Adobe Fonts、バリアブルフォント、base64で埋め込まれたフォントが対象で、形式はWOFF2、WOFF、TTF、OTF、EOT、SVGです。

FontExtractorは、ブラウザがページを表示するときと同じ道筋をたどります。HTMLを取得し、リンクされたすべてのスタイルシート（パフォーマンス重視のサイトが使う preload や print-then-all の読み込みテクニックも含む）を見つけ、@import を数階層まで追跡し、見つかった @font-face ブロックをすべて解析します。検出対象は次のとおりです。

• サイト自身のドメインやCDNから配信される自己ホストフォント
• latin、latin-ext、cyrillic などすべてのUnicodeサブセットを含むGoogle Fonts
• CSS経由で配信されるAdobe Fonts（Typekit）やその他のフォントサービス
• 100〜900 のようにウェイト範囲全体を表示する可変フォント（バリアブルフォント）
• スタイルシート内に data: URIとして直接書かれたbase64埋め込みフォント
• <link rel="preload" as="font"> で宣言されたプリロードフォント
• WOFF2・WOFF・TTF・OTF・EOT・SVGといった主要なすべての形式。複数形式が指定されている場合は最も効率的なものを自動で選びます。

ダウンロード可能なファイルに加えて、CSSが指定しているフォントスタックも表示します。これにより、サイトが -apple-system、Segoe UI、Helvetica Neue、ヒラギノ角ゴなどのシステムフォントに依存しているかどうかが分かります。これらは閲覧者の端末にあるフォントのため、どのフォント抽出ツールでもダウンロードはできません。

デザイナーや開発者がフォントを抽出する理由

タイポグラフィはブランドの個性を大きく左右するため、「このフォントは何？」はデザインで最もよくある質問のひとつです。フォント抽出ツールが特に役立つ場面を紹介します。

• デザインのリサーチ。ムードボードを作り、優れたプロダクトが見出しと本文の書体をどう組み合わせているか比較できます。
• フロントエンド開発。レイアウトを忠実に再現したり、読み込まれないフォントをデバッグしたり、配信形式を確認したりできます。
• ブランド監査。自社サイトのすべてのページが承認済みの書体を読み込み、古いファイルが残っていないかを確認できます。
• パフォーマンス改善。ウェイトを読み込みすぎているサイトや、WOFF2で済むところに重いTTFを配信しているサイトを見つけられます。
• クライアントワーク。以前のサイトで使っていたフォントが分からないときも、数秒で特定できます。

Webサイトから抽出したフォントは使用できますか？

フォントファイルをダウンロードできることと、それを使ってよいことは別の話です。フォントはソフトウェアであり、多くの商用書体はWebサイト単位、アプリ単位、ページビュー数などでライセンスされています。Web上のフォントの多くはオープンソース（たとえばGoogle Fontsのほぼすべては SIL Open Font License）ですが、フォントメーカーやAdobe Fontsの有料書体は、購入したサイトにのみ使用が許諾されています。

FontExtractorはフォントの特定、評価、ローカルでのテストにご利用ください。自分のプロジェクトで公開する前にライセンスを確認し、必要であればフォントメーカーから購入しましょう。書体デザイナーを支えることが、素晴らしい新しい書体が生まれ続ける力になります。

フォント抽出ツールと DevTools・拡張機能の違い

ページのフォントをまとめて一覧にするならオンラインのフォント抽出ツールが向いています。ログインが必要なページやJavaScriptで追加されるフォントには、ブラウザのDevToolsや拡張機能を使いましょう。

ブラウザの開発者ツールでもフォントは調べられます。要素を検証して Computed パネルを開き、Network タブでフォントのリクエストを探す方法です。1つの要素なら有効ですが、複数のファミリーやUnicodeサブセット、可変フォントを使うサイトではすぐに手間が増えます。ブラウザ拡張機能も便利ですが、インストールや全サイトへのアクセス権限が必要で、多くはカーソルを合わせた要素のフォントしか表示しません。

オンラインのWebサイト フォント抽出ツールならインストール不要で、スマートフォンやタブレットを含むあらゆる端末で動作し、ページ全体のフォント一覧をプレビュー、整理されたファイル名、ダウンロード可能なCSSとともに一度に返します。

上手に使うためのヒント

より良い結果を得るには、調べたいページそのものを解析しましょう。フォントが表示されない場合は、そのページのスタイルシートのURLを直接試してください。

• 気になるページそのものを解析しましょう。ランディングページ、ブログ、ドキュメントでは異なるフォントを読み込んでいることがよくあります。
• フォントが見つからない場合、サイトが読み込み後にJavaScriptでスタイルを生成している可能性があります。スタイルシートのURLを直接解析してみてください。
• ボット対策で自動アクセスをブロックしているサイトもあります。失敗したときは時間をおくか、同じドメインの別ページを試してください。
• Webで使うならWOFF2がおすすめです。最も軽量で、すべてのモダンブラウザが対応しています。
• コピーしたCSSの unicode-range は残しておきましょう。ブラウザが必要なサブセットだけをダウンロードできます。

お気に入りのWebサイトがどのフォントを使っているか、知りたくなりましたか？ページの先頭に戻ってリンクを貼り付ければ、あとはフォント抽出ツールにお任せください。