フォントペアリング探索ツール

フォントペアリング探索ツールとは？

フォントペアリング探索ツールは、フォントライブラリをいちいち探さずに見出しと本文の上品な組み合わせを見つけたいウェブデザイナー・開発者・コンテンツ制作者向けの無料のブラウザ内ツールです。Playfair Display と Source Sans 3、Poppins と Inter のように定番の Google フォントの組み合わせを厳選して内蔵し、それぞれをリアルタイムプレビューで表示します。設定から組み合わせを選び、自分の見出しと本文のサンプルを入力すると、プレビューが即座に更新されます。気に入ったら生成された CSS をコピーします。これには Google フォントのスタイルシートを読み込む @import 行 1 行と、見出し・本文の font-family 規則が含まれます。ランディングページ、ブログのテーマ、スライド、デザインシステムの試作に使えるほか、どの書体同士が合うかを学ぶのにも役立ちます。

フォントペアリング探索ツールの使い方

1. 設定を開き、厳選された Google フォントの組み合わせ一覧からペアを選びます。
2. フォントが Google の Fonts CSS API から読み込まれるのを少し待ちます。到着するとプレビューが新しい書体に切り替わります。
3. 自分のサンプル文を入力して見出しと本文のフォントを実際の言葉で確認します。空欄なら既定のサンプルが使われます。
4. 外部フォント読み込みに関する注記を読み、フォントが fonts.googleapis.com から来ることを確認します。
5. 生成された CSS スニペット（@import 行と見出し・本文の font-family 規則）をコピーし、スタイルシートに貼り付けます。

使用例

ペア: Playfair Display + Source Sans 3

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

ペア: Poppins + Inter

h1, h2, h3 { font-family: 'Poppins', serif; font-weight: 600; }

よくある質問

どんなフォントの組み合わせが含まれていますか？

Playfair Display + Source Sans 3、Montserrat + Merriweather、Poppins + Inter、Lora + Roboto、Oswald + Open Sans、Raleway + Lato、Space Grotesk + IBM Plex Sans、DM Serif Display + DM Sans など、人気の Google フォントの見出し・本文の組み合わせを厳選しています。設定から選べます。

フォントはどこから来ますか？

組み合わせを選ぶと、ブラウザが対応するスタイルシートを Google 公開の Fonts CSS API（fonts.googleapis.com）から直接読み込みます。これはブラウザから直接行われる第三者へのリクエストで、フォントが当社のサーバーを経由することはありません。

入力したサンプル文は非公開ですか？

はい。入力した見出しと本文のサンプルは完全にブラウザ内に留まり、ローカルのプレビュー描画にのみ使われます。どこにも送信されず、生成される CSS には組み合わせのフォント名だけが含まれ、あなたの文章は含まれません。

コピーされる CSS には具体的に何が入っていますか？

両方の書体の Google フォントスタイルシートを読み込む @import 行 1 行と、font-family・font-weight 規則です。h1/h2/h3 の見出し用と本文用の 2 セットが含まれます。スタイルシートの先頭に貼り付けてください。

プレビューが一瞬空白だったりスタイルが当たっていないのはなぜですか？

フォントは描画する前に Google からダウンロードする必要があります。スタイルシートが届くまで短い読み込み表示が出ます。失敗した場合（オフラインなど）はエラー表示になり、プレビューはブラウザの既定フォントにフォールバックします。