無料フォントプレビュー＆テスター

このツールが何をするか

フォントプレビューツールは、決定的に1つを選ぶことなく並べて比較できるよう、複数の書体で同じ文字列を同時に表示します。一番上に1度だけテキストを入力し、プロジェクト名、書いている見出し、選んでいるブランドワードマークなど、ギャラリーの各フォントが自分の書体で同じ文字列を表示します。サイズ、色、背景を調整して、本番で実際に表示されるサイズとコントラストで比較がどう見えるかをテストします。任意のフォントをクリックすると、その CSS font-family 宣言がコピーされます。古典的なタイポグラフィ比較文字列「The quick brown fox jumps over the lazy dog」はパングラム(英語アルファベットの各文字が少なくとも1回現れる)です、書体が提供するすべてのグリフを1つの短いフレーズで動かすので有用です。

Webセーフフォント

Webセーフフォントは、すべての主要なオペレーティングシステム(Windows、macOS、Linux)で利用可能な文字です。ダウンロードする必要があるカスタムフォントとは異なり、Webセーフフォントはユーザーのデバイスにすでにインストールされているため、瞬時に表示されます。このツールは、30以上のWebセーフフォントと20以上の人気のあるGoogle Fontsをグループ化しており、Webから瞬時に読み込まれます。

Google Fonts と Web フォントホスティングの時代

Google Fonts は2010年5月にオープンソース書体の無料 CDN ライブラリとして開始しました。元のローンチは18フォントでした、2026年にはカタログは1,500以上のファミリーを超え、すべて SIL Open Font License または類似の許容的なライセンスです。Open Sans(Steve Matteson、2010)、Roboto(Christian Robertson、2011)、Lato(Łukasz Dziedzic、2010)、Montserrat(Julieta Ulanovsky、2011)、Source Sans Pro(Adobe の Paul Hunt、2012)、Inter(Rasmus Andersson、2016)、Poppins(Indian Type Foundry、2014)、Nunito(Vernon Adams、2011)、これらは現代のウェブで最も使われている書体の中にあり、すべて Google Fonts で無料で利用できます。カタログのロード機構は何年もかけて進化しました:2010年の元のローンチは Google CSS エンドポイントへの <link> タグを使用、2018年から FOUT/FOIT 動作を制御する display=swap パラメーターに重点、2022年の Google Fonts API v2 はパフォーマンスを向上させるためサブセットを事前レンダリング、プライバシーを意識するサイトでは、Google CDN のプライバシーと GDPR 遵守の懸念を避けるためにフォントを自己ホストすることが多い(2022年のドイツの判決は、ユーザー同意なしに Google サーバーから Google Fonts を読み込むことが GDPR に違反することを明示的に判決)。Adobe Fonts(以前は Typekit、2011年買収)、Fontshare(Indian Type Foundry の無料フォント、2021)、Bunny Fonts(プライバシー尊重の Google Fonts ミラー、2021)が主な代替です。

フォントカテゴリー

• セリフフォント · Georgia、Times New Roman、Palatino。伝統的、読みやすい、フォーマル。記事や本の本文テキストに最適。
• サンセリフフォント · Arial、Helvetica、Verdana、Roboto、Open Sans。モダン、クリーン、汎用性が高い。Webデザインで最も人気があります。
• 等幅フォント · Courier New、Source Code Pro。固定幅。コード、ターミナル、技術文書に最適。
• ディスプレイフォント · Impact、Playfair Display、Oswald。大きく、太く、装飾的。タイトルとブランディングに最適。
• 手書き風およびスクリプトフォントは手書きスタイルを模倣します。個人的なブランディングや招待状型に控えめに有用、本文サイズではほぼ読めない、大文字を使うように使用(短く、意図的に)。

可変フォント、現代の静かな革命

OpenType Font Variations 仕様(Apple の TrueType GX Variations 1994 + Adobe の貢献、2016年9月の OpenType 1.8 として共同標準化)は、単一のフォントファイルが関連バリエーションの無限ファミリーを記述することを可能にします。従来のファミリーが Light、Regular、Medium、Bold、Black、それぞれのイタリックに別々のファイルを提供する場合、それぞれ50-200 KB の6から10ファイル、可変フォントは1つのファイルですべての同じデザインを軸(weight、width、italic、optical size、書体デザイナーが定義する任意のカスタム軸)に沿った連続的なバリエーションとして含みます。ブラウザサポートは Chrome 62(2017年10月)、Firefox 62(2018年9月)、Safari 11.0 / 11.1(2017-2018)、Chromium ベースの Edge(2020年)で到来しました。主要な可変フォントリリースには Roboto Flex(Christian Robertson + Font Bureau、2022年10月)13軸、Recursive(Stephen Nixon、2019)、Inter(Rasmus Andersson)weight + italic 軸付き、ほとんどの主要な書体リリースは現在、従来の静的ファイルと並んで可変版を出荷しています。帯域幅の節約は劇的です、200 KB の可変フォントファイルは8つの100 KB の静的ファイルを置き換え、より多くのデザインの柔軟性を提供します。

フォントロードと FOUT/FOIT 問題

ブラウザがカスタムフォントファイルを取得する間、何を表示するか? 2つの極端な戦略。FOIT(Flash of Invisible Text)、フォントが到着するまでテキストを表示せず、その後突然テキストを表示します。フォントが読み込まれるまでページは壊れて見えます。FOUT(Flash of Unstyled Text)、フォールバックフォントで即座にテキストを表示し、カスタムフォントが到着したらそれに切り替えます。最初のフレームからページは読めますが、切り替えは視覚的に不安定です。CSS の font-display プロパティ(CSS Fonts Module Level 4 で追加)は開発者に制御を与えます:auto(ブラウザのデフォルト、通常 FOIT 寄り)、block(完全な FOIT)、swap(完全な FOUT、現代の支配的なベストプラクティス)、fallback(短い不可視ブロックの後にスワップ、数秒後に「十分良い」フォールバック)、optional(十分速くロードしない場合カスタムフォントを完全にスキップ)。2026年の Core Web Vitals と Lighthouse スコアには font-display: swap が標準的な推奨で、重要なフォントには preload ヒント、慎重に選ばれたメトリック的にカスタムフォントに似たフォールバックフォント(切り替え時にレイアウトがリフローしないように、CSS Fonts Module Level 5 の新しい size-adjust プロパティがこれを微調整)を伴います。

用途別にフォントを選ぶ

• UI 本文テキスト、システムフォントスタックを最初に(Apple SF、Segoe UI、Roboto、ユーザーの OS に従う)、ゼロレイテンシーとプラットフォームに適したレンダリングのため。ブランディング上の理由でカスタムフォントが必要な場合、ヒューマニストサンセリフ(Inter、Open Sans、Source Sans Pro)を 16 px 以上で選択。
• 長文読書(記事、ブログ)、画面最適化セリフ(Georgia、Merriweather、Lora)を 18-22 px で寛大な行間(1.6-1.8)で。セリフは長文の視覚的トラッキングを助けます。
• ブランドワードマーク、1つの大きいサイズで使用される独特のディスプレイ書体。より中立的な本文書体と組み合わせる。ここでカスタムまたは委託書体に投資すると報われます、これはブランドの最も目立つタイポグラフィ的決定です。
• コードブロック、専用のプログラミングフォント(JetBrains Mono、Fira Code、Cascadia Code)を 14-15 px で。プログラミングリガチャは個人的な好みです、多くの開発者は気に入っていますが、混乱すると感じる人もいます。
• 数値表、表形式数字を持つフォント(数字 1 が 2、3 などと同じ幅を占める)、数の列が手動のパディングなしで揃うように。ほとんどの現代のフォントは font-variant-numeric: tabular-nums プロパティを通じて表形式数字を提供します。
• 装飾的使用のみ、手書き、スクリプト、レトロディスプレイフォント。短く意図的に使用、本文に決して使わない。

よくある質問

Webセーフフォントとカスタムフォントの違いは?

Webセーフフォントはユーザーのコンピュータに事前にインストールされており、瞬時に表示されます。カスタムフォント(Google Fonts、Typekitなど)はダウンロードする必要があり、レイテンシが追加されますが、より多くの種類を提供します。ほとんどのサイトは両方を組み合わせています: フォールバックとしてWebセーフフォント、メインとしてカスタムフォント。

サイトでGoogle Fontを使うには?

このツールが提供するfont-family CSS宣言をコピーして、CSSに貼り付けます。Google FontsはHTMLヘッドのlinkタグを介して読み込まれます。このツールはすでにフォントリンクを含んでいます: 要素にfont-familyルールを適用するだけです。

本文テキストに適したセリフフォントは?

GeorgiaとMerriweatherは本文テキストに優れています。文字間隔と独特の文字形状のおかげで、画面で非常に読みやすいです。Times New Romanはウェブには狭すぎます。モダンなセリフには、Playfair Displayを試してください。

このプレビューツールはオフラインで動作しますか?

Web セーフフォント(Arial、Georgia、Verdana など)はオペレーティングシステムから読み込まれるため、オフラインで動作します。ギャラリー内の Google Fonts は表示するために Google CDN からの一時的なネットワーク取得を必要とします、一度読み込まれるとキャッシュされ、その後プレビューはオフラインで動作します。確認するには初期ロード後にページをオフライン(機内モード)にしてください、OS にインストールされたフォントは引き続き表示され、Google Fonts はキャッシュされたものを使用します。

関連ツール