フォント組み合わせツール｜厳選 Google Fonts の見出し×本文ペアを実物プレビュー＆CSS コピー

雰囲気で絞り込む

サンプル言語:

見出し — Playfair Display

本文 — Inter

この欧文フォントは日本語の字形を含みません。当該言語のサンプルはお使いの端末のフォントで参考表示しています。

見出しフォント: Playfair Display×本文フォント: Inter

厳選フォントペア(28)

CSS をコピー

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Inter', system-ui, sans-serif; }

フォントを手動で変更（任意）

見出しまたは本文のフォントを一覧から選んで上書きできます。

見出しフォント

本文フォント

使い方

雰囲気タグ（モダン・エレガント・ミニマルなど）で絞り込むか、厳選ペア一覧からそのまま選んでください。
ペアをクリックすると、実際のフォントで見出し＋本文のライブプレビューが表示されます。
プレビュー文を自分のコピー（キャッチコピーや本文）に書き換えて、実際の見え方を確認できます。空にすると既定サンプルに戻ります。
「シャッフル」でランダムに別ペアへ移動、「入れ替え」で見出しと本文のフォントを入れ替えて比較できます。
気に入ったペアは★ボタンで保存（ブラウザ内のみ・送信なし）。
組み合わせが決まったら「CSS をコピー」でGoogle Fontsの読み込みコード＋font-family指定をワンクリックで取得。登録不要。

フォントペアリングとは？

フォントペアリングとは、見出し用と本文用に相性の良い2つの書体を選ぶことです。適切な組み合わせは、視覚的な階層を作り、読みやすさを高め、デザインに一貫した個性を与えます。よくある失敗は「フォントを使いすぎること」。2書体（個性的な見出し＋読みやすい本文）に絞るのが鉄則です。

見出しと本文で役割を分ける

見出しフォントは目を引き、個性を表現します。本文フォントは長く読んでも疲れない可読性を担います。役割が異なるから、あえて異なる書体を選ぶことが効果的です。

コントラストをつける

セリフ（明朝体系）とサンセリフ（ゴシック体系）を組み合わせるのは王道のアプローチです。2つのスタイルの構造的な違いが、デザインをまとまって見せます。似すぎた2書体は「なんとなく揃っていない」印象になりやすいので避けましょう。

書体の数は2つに絞る

基本は見出し＋本文の2書体で十分です。増やすほどまとまりにくくなります。迷ったら「個性的なディスプレイ系＋読みやすい中立的な本文用」の組み合わせが安全です。

雰囲気タグの意味

各ペアには1〜3個の雰囲気タグが付いています。タグを組み合わせて（OR）絞り込むか、絞り込まずシャッフルで探索することもできます。

モダン / ミニマル / クリーン

すっきりと今っぽい印象。SaaS・ポートフォリオ・テック系サイト・余白を大切にしたデザインに。

エレガント / クラシック / エディトリアル

上品で時代を超えた印象。ブランドアイデンティティ・雑誌・ブログ・高級感を出したいサイトに。

フレンドリー / プレイフル

温かく親しみやすい印象。個人サービス・教育系・コンシューマー向けアプリ・ウェルカムな雰囲気にしたいブランドに。

テック / ボールド

力強く先進的な印象。開発者ツール・テクニカルドキュメント・スタートアップ・インパクト重視のランディングページに。

機能

厳選ペア辞書から選ぶ

20組以上の手選びの見出し×本文の組み合わせ。各ペアに用途・雰囲気タグと一行説明付き。総当りでなく「使える定番」だけを収録。

実フォントのライブプレビュー（文を編集できる）

選んだペアの見出し＋本文が実際の書体で即時表示。プレビュー文を自分のコピーに書き換えて確認できます。

シャッフル・入れ替え

シャッフルで（絞り込み内の）別ペアにランダム移動。入れ替えで見出しと本文のフォントを交換して比較できます。

お気に入り保存

気に入ったペアを★で保存。ブラウザ内（localStorage）のみ保存・外部送信なし。後で見返せます。

CSS をワンクリックでコピー

Google Fonts の読み込み（@import または <link>）＋ font-family 指定を生成してコピー。CSS 変数・Tailwind 形式も選べます。

活用例

Web サイトの見出し・本文を決める

雰囲気タグでブランドの方向性に合ったペアを選び、CSS をスタイルシートにそのまま貼り付けるだけです。

スライド・資料のフォントを決める

CSS を使わない場面でも、どのフォント同士が合うかの参考に。Figma・PowerPoint・Keynote で同じフォントをインストールして使えます。

そのまま CSS / Tailwind に貼る

生成されたスニペットにはGoogleFontsの読み込みコードとfont-family宣言が含まれます。Tailwind形式ならfontFamilyの設定ブロックとして即使えます。

日本語・中国語・韓国語の表示について

本ツールの多くのペアは欧文（ラテン文字）フォントです。欧文フォントは和文・中文・韓文の字形を含まないため、以下の点にご注意ください。

「英語（Latin）」サンプルに切り替えると、欧文フォントが正しく表示されます（欧文サイト・ロゴ・スライドの確認に最適）。
「日本語」サンプルでは、お使いの端末のフォントで参考表示され、「この欧文フォントは日本語字形を含みません」と注記が出ます。
和文・中文・韓文向けの専用ペア（端末の標準 CJK フォントを使用）も用意しており、日本語ページでは上位に表示されます。
欧文中心のサイト・スライド・ブランディングに最も役立つツールです。

フォントとプライバシーについて

プレビューのフォントはこのサイトから配信されます（ビルド時に next/font/google で同梱）。フォント表示のために Google のサーバー（fonts.googleapis.com / fonts.gstatic.com）へは接続しません。あなたの IP が Google に送られることはありません。
入力したサンプル文・お気に入りはブラウザ内（localStorage）のみで保存・管理されます。サーバーへの送信は一切ありません。
コピーする CSS スニペット内の @import URL はあなたのサイト用の導入コードです。このページ自体がその URL を実行するわけではありません。
採用フォントはすべてオープンソースライセンス（SIL OFL 1.1）で商用利用も可能です。ご自身のプロジェクトで使う際は Google Fonts の各フォントページで規約をご確認ください。

よくある質問

フォントの組み合わせはどう選べばいい？

コントラストをつけるのが基本です。セリフ（明朝体）とサンセリフ（ゴシック体）を組み合わせる、あるいは個性的なディスプレイフォントと読みやすい中立的な本文フォントを合わせましょう。2書体に絞り、雰囲気タグで方向性を合わせると失敗しにくいです。

このツールのフォントは無料・商用利用できる？

採用フォントはすべて SIL Open Font License（OFL）でオープンソース化されており、商用利用も可能です。ただしクライアントプロジェクト等に使う際は、Google Fonts の各フォントページで最新の規約をご確認ください。

CSS はそのまま自分のサイトに貼れる？

はい。コピーされる CSS には Google Fonts の読み込みコード（@import または <link>）と font-family の指定が含まれており、スタイルシートに貼り付けるだけで適用できます。Tailwind 形式も選べます。

入力したテキストやデータはどこかに送られる？

いいえ。すべてブラウザ内で処理されます。サンプル文・お気に入り・フォント選択はサーバーに送信されません。プレビューのフォントもこのサイトから配信されており、Google のサーバーへは接続しません。

日本語のフォントの組み合わせも見られる？

多くのペアは欧文フォントで和文字形を含みません。「英語（Latin）」モードで欧文フォントを正しく確認でき、「日本語」モードでは端末フォントで参考表示＋注記が出ます。和文専用ペア（端末標準フォント使用）も用意しており、上位に表示されます。

見出しや本文のフォントを自分で変えられる？

はい。ペア一覧の下にある「フォントを手動で変更」セクションから、採用フォント一覧のいずれかを見出しまたは本文に指定できます。プレビューと CSS がすぐに更新されます。

お気に入りはどこに保存される？

お使いのブラウザの localStorage にのみ保存されます。他の端末・ブラウザには引き継がれず、外部には送信されません。