Webパフォーマンスのためのモダンフォント読み込み戦略

Webフォントはサイトのパフォーマンスを左右する重要な要素です。適切に実装されていないフォント戦略は、テキストの非表示、レイアウトシフト、そしてユーザーの不満を招きます。しかし、多くの開発者は未だに2015年のようなフォント読み込みを行っており、巨大なファイルを配信し、モダンなCSS機能を無視して、ただ運に頼っているのが現状です。

この記事では、今日から実装できる実用的なフォント読み込み戦略について説明します：WOFF2圧縮の活用、font-displayによるレンダリング制御、インテリジェントなフォントサブセット化、フォールバックとしてのシステムフォントスタックの使用、重要フォントのプリロード、そして適切な場面でのバリアブルフォントの採用です。Core Web Vitalsを改善しながら、パフォーマンスとタイポグラフィのバランスを取る方法を学びます。

WOFF2を選択し、レガシー形式を排除する

複数のフォント形式の配信を停止しましょう。WOFF2はWOFFより30%優れた圧縮率を提供し、汎用的なブラウザサポートがあります。IE11をサポートしていない限り、WOFF2だけで十分です。

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

WOFF2と併せてTTF、OTF、またはWOFFを配信することは帯域幅の無駄です。すべての訪問者が、ほとんど存在しないブラウザのためにパフォーマンスの代償を払うことになります。既存のフォントはFontSquirrelやCloudConvertを使用して変換しましょう。

font-displayでレンダリングを制御する

font-display記述子は、フォントリクエストとレンダリングの間のギャップをブラウザがどう処理するかを決定します：

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* フォールバックを即座に表示 */
}

選択肢：

• swap: フォールバックテキストを即座に表示し、準備完了時に切り替え（FOITを防止）
• fallback: 短い非表示期間（約100ms）の後、フォールバック表示
• optional: 即座に利用可能な場合のみフォントを使用
• block: 最大3秒間テキストを非表示（これは避ける）

本文テキストにはswapを使用し、装飾的なフォントにはoptionalを検討しましょう。この一行だけで非表示テキストの問題を解決できます。

スマートフォントサブセット化の実装

ほとんどのサイトは、決して使用しない完全な文字セットを配信しています。完全なLatin Extended フォントは100KBを超える場合がありますが、英語サイトでは30KB分のグリフしか必要ないかもしれません。

unicode-rangeを使用してスクリプト別にフォントを分割します：

/* Latin */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

/* Latin Extended */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF;
}

Glyphhangerなどのツールは、コンテンツを分析して最適なサブセットを生成します。Google Fontsの場合、google-webfonts-helperが事前にサブセット化されたファイルを提供します。

堅牢なシステムフォントスタックの設計

システムフォントは即座に読み込まれ、優れたフォールバックを提供します。適切に作成されたスタックは、カスタムフォントが失敗した場合でも読みやすいテキストを保証します：

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, sans-serif;
}

CSS記述子を使用してカスタムフォントとフォールバックフォント間のメトリクスを一致させます：

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100.5%; /* フォールバックメトリクスに一致 */
  ascent-override: 95%;
  descent-override: 25%;
}

Font Style Matcherを使用してこれらの値を計算し、レイアウトシフトを最小化しましょう。

重要フォントのプリロード

プリロードは、CSSで発見される前にフォントを即座に取得するようブラウザに指示します：

<link rel="preload" href="/fonts/inter-latin.woff2" 
      as="font" type="font/woff2" crossorigin>

重要な考慮事項：

• ファーストビューのフォントのみプリロード
• crossorigin属性を含める（フォントに必須）
• @font-face宣言の正確なURLと一致させる
• すべてのサブセットをプリロードしない—サブセット化の目的を損なう

最大の効果を得るため、インライン化された重要CSSと組み合わせます：

<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-latin.woff2') format('woff2');
    font-display: swap;
  }
</style>

バリアブルフォントの戦略的検討

バリアブルフォントは複数のファイルを一つで置き換えることができますが、常に小さいとは限りません。ウェイト100-900をサポートするバリアブルフォントは50KBかもしれませんが、2つの静的ウェイトの合計は30KBかもしれません。

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* 範囲内の任意のウェイトを使用 */
h1 { font-weight: 750; }
p  { font-weight: 425; }

バリアブルフォントが優れている場面：

• 複数のウェイトや幅が必要
• ウェイト間のスムーズなアニメーション
• ビューポートに応じてスケールするレスポンシブタイポグラフィ

2-3のウェイトを使用するシンプルなサイトでは、静的フォントの方がパフォーマンスが良い場合が多いです。

Core Web Vitalsへの影響

適切なフォント読み込みは主要なメトリクスを直接改善します：

Largest Contentful Paint (LCP): プリロードとfont-display: swapにより、テキストが素早くレンダリングされ、LCP測定の遅延を防ぎます。

Cumulative Layout Shift (CLS): フォントメトリクスの一致とsize-adjustの使用により、フォント読み込み時の不快なテキストリフローを排除します。

First Input Delay (FID): フォントペイロードの削減とレンダリングブロッキング動作の回避により、メインスレッドのレスポンシブ性を維持します。

まとめ

モダンなフォント読み込みは、一つの完璧な戦略を選ぶことではなく、特定のニーズに適した技術を組み合わせることです。WOFF2とfont-display: swapから始めましょう。重要フォントにはサブセット化とプリロードを追加します。堅実なフォールバックとしてシステムフォントスタックを使用します。明確な利点がある場合のみバリアブルフォントを検討しましょう。

最も重要なのは、影響を測定することです。WebPageTestやLighthouseを使用して、フォント戦略が実際のパフォーマンスメトリクスを改善することを確認しましょう。美しいタイポグラフィはユーザーエクスペリエンスを犠牲にすべきではありません。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.