プレビュー設定
フォントサイズ
24px
ウェイト
行間 (line-height)
1.8
字間 (letter-spacing)
0em
✅ コピーしました！
Webフォントとは？
Webフォントとは、Webサーバーやクラウドからフォントファイルをダウンロードしてブラウザ上に表示する技術です。ユーザーのデバイスにインストールされているシステムフォントに依存せず、デザイナーが意図した書体を正確に表示できます。Google Fontsは、1,500種類以上のオープンソースフォントを無料で提供するGoogleのサービスで、個人・商用ともに無制限で使用可能です。
Google Fontsの使い方
Google Fontsのフォントは、以下の2つの方法でWebサイトに組み込めます。
- <link> タグ（推奨）— HTMLの <head> 内に記述。ブラウザが並列でダウンロードするため高速。
- CSS @import — CSSファイル内に記述。CSSの解析が完了してから読み込むため若干遅い。
どちらの方法も、このツールの「<link> タグ」「@import」タブからコードをコピーして貼り付けるだけですぐに使えます。
日本語Webフォントの注意点
日本語フォントは英語フォントと比べてファイルサイズが大幅に大きくなります（漢字は約2万字以上）。Google Fontsは「フォントスライシング（動的サブセット）」技術により、実際にページで使用されている文字だけを小分けで配信するため、従来のWebフォントサービスより大幅に高速です。
- font-display: swap — フォント読み込み中はシステムフォントで表示し、読み込み完了後に切り替える設定。Google FontsのAPIは自動的に付与します。
- preconnect — <link rel="preconnect"> をあらかじめ設定することで、DNS解決・TCP接続を事前に確立しフォント読み込みを高速化できます。
- ウェイト数を絞る — 使用するウェイト（太さ）が多いほどダウンロードサイズが増加します。使用しないウェイトは省略しましょう。
フォント選びのポイント
Webフォントを選ぶ際に考慮すべき主な観点は以下の3つです。
- 可読性 — 本文テキストには、長時間読んでも疲れにくいゴシック体・サンセリフ体が適しています。明朝体・セリフ体は格調あるデザインや見出しに向いています。
- ブランディング — フォントはブランドの印象を大きく左右します。現代的・クリーン → Inter / Noto Sans JP、伝統・格式 → Noto Serif JP / Playfair Display が定番です。
- パフォーマンス — 複数フォントの読み込みはページ速度に影響します。本文フォント1〜2種類に絞り、アクセントとして装飾フォントを1種加える程度が理想的です。
よく使われるフォントペアリング
見出しと本文で異なるフォントを組み合わせる「フォントペアリング」は、デザインに変化とメリハリをもたらします。以下は定番のペアリング例です。
- Noto Serif JP × Noto Sans JP 見出しに明朝体、本文にゴシック体。信頼感と読みやすさの両立。
- Playfair Display × Lato 上品な英字見出し×読みやすいサンセリフ。ラグジュアリーブランドに定番。
- Montserrat × Open Sans 幾何学的な見出し×汎用的な本文。テックやスタートアップに人気。
- Oswald × Merriweather コンデンスな見出し×読みやすいセリフ体。メディアサイトに向く。
- Klee One × Noto Sans JP 手書き風の温かみある見出し×シンプルな本文。和風・日本語コンテンツに。