Google Fontsペアファインダー
見出しと本文テキストの補完的なGoogle Fontsペアリングを検索してプレビューします。
このツールについて
Google Fontsペアファインダーは、Google Fontsライブラリから補完的なフォントペアリングを見つけるのに役立ちます。見出しと本文フォントの適切な組み合わせを選ぶことは、Webデザインにおいて最もインパクトのあるタイポグラフィの決定の一つであり、このツールでペアリングの探索、プレビュー、実装が簡単にできます。
本ツールには、スタイルカテゴリ（Modern + Serif、Elegant + Clean、Geometric + Humanistなど）別に整理された21以上の厳選されたフォントペアリングが含まれています。各ペアリングはタイポグラフィの原則に基づいて選定されています：衝突のないスタイルのコントラスト、一致するxハイト、補完的な文字幅。
CDNからフォントをロードする代わりに、プレビューではシステムフォールバックフォントを使用して、外部ネットワークリクエストなしで各ペアリングの雰囲気を表示します。これにより、ツールは完全にオフラインで動作し、データがブラウザの外に出ることはありません。ペアリングを使用する準備ができたら、完全なCSS @import文、HTML <link>タグ、適切なフォールバックスタック付きのfont-family宣言を生成します。
プレビューのあらゆる側面をカスタマイズできます：見出しサイズ（18-72px）、本文サイズ（12-24px）、行の高さ（1.0-2.5）の調整、テキストと背景色の選択で、デザインコンテキストでのペアリングの見え方を確認できます。フルタイポグラフィシステムを構築する場合は、カスタムフォールバックチェーン用のFont Stack Builderや、タイプスケールを再利用可能なトークンとして体系化するDesign Tokens Generatorをお試しください。
すべての処理はブラウザ内で完全に実行されます。プレビュー中にGoogleサーバーからフォントがロードされることはなく、バックエンドへのデータ送信もありません。
使い方
- ドロップダウンメニューからフォントペアリングを選択します。各オプションには見出しフォントと本文フォント、スタイルカテゴリが表示されます。
- システムフォールバックフォントで選択したペアリングが表示されるライブプレビューエリアを確認します。
- 見出しと本文のサンプルテキストを編集して、自分のコンテンツでテストします。
- 見出しサイズ、本文サイズ、行の高さスライダーをデザイン要件に合わせて調整します。
- テキストと背景色を設定して、カラースキームでのペアリングをプレビューします。
- コピーボタンを使用してHTMLリンクタグをコピーし、
<head>に追加します。 - コピーボタンで生成されたCSSをコピーするか、Ctrl+Shift+Cで@import、font-family宣言、フォールバックを含む完全なCSS出力をコピーします。
人気のフォントペアリング例
よくある質問
このツールは実際のGoogle Fontsをロードしますか？
いいえ。プレビューでは外部ネットワークリクエストなしで各ペアリングを近似するためにシステムフォールバックフォント（Georgia、Arial、system-uiなど）を使用します。これにより、ツールは高速、プライベート、完全にオフライン対応です。生成されたCSSには適切な@import URLが含まれているため、コードをプロジェクトに追加するとフォントがロードされます。
Webサイトにフォントを追加するにはどうすればいいですか？
HTMLリンクタグをコピーしてHTMLの<head>セクションに貼り付けます。次にCSS出力をコピーしてスタイルシートに追加します。@import文がGoogleのCDNからフォントをロードし、font-family宣言が見出しと本文テキストに適用されます。
良いフォントペアリングとは何ですか？
良いフォントペアリングは衝突のないコントラストを持っています。セリフ見出しとサンセリフ本文（またはその逆）は視覚的な階層を作ります。一致するxハイトは一貫した配置を保証します。補完的な文字幅は一方のフォントがもう一方を圧倒するのを防ぎます。このツールのすべてのペアリングはこれらの原則に従っています。
フォントウェイトをカスタマイズできますか？
生成されたCSSは各ペアリングに最適なウェイトを使用します（通常、見出しに600-800、本文に400）。コピー後に生成されたCSSのfont-weight値を変更できます。Google Fontsのインポート URLには必要なウェイトバリアントが含まれています。
これらのペアリングは本番環境で使用できますか？
はい。すべてのペアリングはGoogle Fontsライブラリのフォントを使用しており、個人・商用プロジェクトの両方で無料で使用できます。フォントはGoogleのグローバルCDNから優れたパフォーマンスとブラウザサポートで提供されます。
Font Stack Builderとの違いは何ですか？
Font Stack BuilderはあらゆるフォントのカスタムCSS font-familyフォールバックチェーンを構築できます。このGoogle Fontsペアファインダーは、Google Fontsから補完的な見出し＋本文フォントの組み合わせを見つけることに特化しており、厳選されたペアリングと生成されたインポートコードを提供します。
データは安全ですか？
はい。すべての処理はブラウザ内で完全に実行されます。テキスト、色、設定がサーバーに送信されることはありません。ツールは完全にオフラインで動作し、サードパーティトラッカーもありません。
関連ツール
フォントスタックビルダー
ドラッグ＆ドロップでCSS font-familyスタックを構築します。ライブプレビューとシステム、serif、sans-serif、monospace用の人気プリセット付き。
デザイントークンジェネレーター
デザイントークンをCSSカスタムプロパティ、JSON、SCSS変数として生成します。
グラデーションテキスト生成
CSSグラデーションをテキストに適用し、ライブプレビューでbackground-clipテキスト効果を生成します。
テキストシャドウ生成
オフセット、ブラー、色のスライダーでCSSテキストシャドウ効果をビジュアルに設計します。
CSS変数ジェネレーター
CSSカスタムプロパティでカラーテーマシステムを設計します。シェードスケール、セマンティックトークン、ダークモード対応を自動生成。