フォントペアリングジェネレーター
厳選された20種類のGoogleフォントペアリングをご覧ください。カスタムテキストでプレビューし、サイズを調整して、すぐに使えるCSSをコピーできます。
미리보기 텍스트
인기 폰트 조합 20선
CSS 코드
복사됨!
フォントペアリングジェネレーターとは？
フォントペアリングジェネレーターは、デザイナーや開発者が、見出しと本文のフォントの調和のとれた組み合わせを見つけるのに役立ちます。優れたタイポグラフィの組み合わせは、視覚的な階層と読みやすさを生み出します。このツールは、人気のあるGoogleフォントの組み合わせ20種類を厳選し、独自のテキストでプレビューして、すぐに使用できるCSSコードを生成します。
完璧なフォントペアリングを見つける方法
- カスタムテキストを入力 — 入力フィールドに見出しと本文のテキストを入力します
- サイズを調整 — スライダーを使用して、見出しと本文のフォントサイズを設定します
- ペアリングを参照 — 厳選された20種類のGoogleフォントの組み合わせをスクロールして確認します
- 背景を切り替え — ダークとライトのプレビューを切り替えて、フォントが両方のモードでどのように見えるかを確認します
- ペアを選択 — いずれかのペアリングをクリックして、CSSコードを表示します
- CSSをコピー — 「CSSをコピー」をクリックして、プロジェクトのインポートとスタイルルールを取得します
このフォントペアリングツールを使用する理由
- 厳選された品質 — セリフ+サンセリフのコントラストなど、実績のあるデザイン原則に従った20個の手選り組み合わせ
- ライブプレビュー — フォントはGoogle Fonts CDNからロードされ、カスタムテキストでリアルタイムにレンダリングされます
- サイズ制御 — スライダーを使用すると、見出しと本文のさまざまなサイズをテストして、プロポーションとリズムを確認できます
- ダーク＆ライト — 背景モードを切り替えて、ペアリングが両方のテーマでどのように機能するかを確認します
- すぐに使えるCSS — プロジェクトにドロップする正確な@importおよびfont-familyルールを取得します
- アカウントは不要 — 無料、サインアップ不要、ブラウザで完全に実行
FreeToolboxと他のフォントペアリングツールの比較
| 機能 | FreeToolbox | Fontjoy | Typ.io |
|---|---|---|---|
| ペアリング | 厳選された20種類 | AI生成 | コミュニティ |
| カスタムテキスト | はい | はい | いいえ |
| サイズ制御 | スライダー | いいえ | いいえ |
| ダーク/ライト切り替え | はい | いいえ | いいえ |
| CSSエクスポート | ワンクリック | いいえ | 手動 |
| 広告 | 最小限 | 中程度 | 多い |
| プライバシー | ブラウザのみ | サーバー | サーバー |
よくある質問
これらのフォントは無料で使用できますか？
はい。20種類のペアリングはすべて、無料でオープンソースのGoogleフォントを使用しています。個人用および商用プロジェクトで、ライセンス料なしで使用できます。
フォントはどのようにロードされますか？
フォントは、Google Fonts CDNからオンデマンドでロードされます。ペアリングをスクロールすると、各フォントがフェッチされ、ブラウザによってキャッシュされます。
生成されたCSSをプロジェクトで直接使用できますか？
はい。CSSコードには、@import URLとfont-familyルールが含まれています。スタイルシートにコピーして貼り付けると、すぐにペアリングの使用を開始できます。
セリフとサンセリフを組み合わせるのはなぜですか？
コントラストは、優れたタイポグラフィの基本原則です。セリフの見出しとサンセリフの本文（またはその逆）を組み合わせることで、明確な視覚的階層が作成され、読みやすさが向上します。
自分のテキストでプレビューできますか？
はい。上部にある入力フィールドに見出しと本文のテキストを入力します。20種類のペアリングすべてが、カスタムテキストですぐに更新されます。