Webフォントの基礎｜読み込み最適化とフォールバック設定

Webフォントを使うと、デザインの表現力が格段に上がります。

しかし、設定を間違えるとページの読み込みが遅くなる原因にも。この記事では、パフォーマンスを考慮したWebフォントの使い方を解説します。

Webフォントの基本

Webフォントとは

ユーザーのデバイスにインストールされていなくても、サーバーからダウンロードして表示できるフォントです。

主な提供方法：

Google Fonts（無料）
Adobe Fonts（有料）
自前でホスティング

font-familyの指定

CSSではfont-familyでフォントを指定します：

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

左から優先順位が高く、見つからない場合は次のフォントにフォールバックします。

Google Fontsの効率的な使い方

必要なウェイトだけ読み込む

すべてのウェイトを読み込むと、データ量が大きくなります：

<!-- ❌ 全ウェイト（重い） -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

<!-- ✅ 必要なウェイトだけ -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

display=swapを使う

display=swapを指定すると、フォント読み込み中はシステムフォントで表示し、読み込み完了後に切り替わります：

<link href="...&display=swap" rel="stylesheet">

これにより、テキストが見えない時間（FOIT）を防げます。

preconnectで高速化

Google Fontsのドメインに事前接続しておくと、読み込みが速くなります：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

フォールバックの設定

フォントスタック

複数のフォントを指定し、環境に応じて最適なフォントを表示します：

body {
  font-family:
    "Noto Sans JP",           /* Webフォント */
    "Hiragino Kaku Gothic ProN",  /* macOS */
    "Meiryo",                 /* Windows */
    sans-serif;               /* 最終フォールバック */
}

size-adjustでCLSを防ぐ

フォント切り替え時のレイアウトシフト（CLS）を防ぐには、size-adjustが有効：

@font-face {
  font-family: "Fallback";
  src: local("Hiragino Kaku Gothic ProN");
  size-adjust: 95%;  /* Webフォントとサイズを合わせる */
}

パフォーマンス測定

Core Web Vitals

Webフォントは以下の指標に影響します：

指標	影響
LCP	フォント読み込み遅延でテキストが遅れて表示
CLS	フォント切り替えでレイアウトがずれる

Lighthouse

Chrome DevToolsのLighthouseでフォント関連の問題をチェックできます。

日本語フォントの注意点

日本語フォントはファイルサイズが大きい（1MB以上になることも）。

対策

必要な文字だけサブセット化
WOFF2形式を使用（最も圧縮率が高い）
font-display: swapで表示を優先

まとめ

Webフォントを効率的に使うポイント：

✅ 必要なウェイトだけ読み込む
✅ display=swapでFOITを防ぐ
✅ preconnectで接続を高速化
✅ 適切なフォールバックを設定
✅ 日本語フォントはサブセット化を検討

パフォーマンスとデザインのバランスを取りながら、Webフォントを活用しましょう。