フォント読み込みとCLS — Webフォントによるレイアウトシフトの防止

Webフォントがレイアウトシフトを引き起こす仕組み

Webフォントは一般的なCLSの原因です。Webフォントが読み込まれてフォールバックのシステムフォントを置き換えるとき、2つのフォントのメトリクス（文字幅、行高、間隔）が異なるためテキストがリフローします。

FOUTとFOIT

• FOUT（スタイルなしテキストのフラッシュ）：フォールバックフォントでテキストがレンダリングされ、Webフォントの読み込み時にスワップ — 目に見えるレイアウトシフトが発生
• FOIT（非表示テキストのフラッシュ）：Webフォントが読み込まれるまでテキストが非表示

font-display戦略

CLSの最適化には、font-display: optionalが最適です。目に見えるフォントスワップが発生しません。

CSS size-adjustとオーバーライドプロパティ

@font-face {
  font-family: "Adjusted Arial";
  src: local("Arial");
  size-adjust: 105.4%;
  ascent-override: 92%;
  descent-override: 22%;
}

next/fontやFontaineなどのツールがこれらの調整を自動的に計算します。

フォントのプリロード

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

crossorigin属性は、同一オリジンのフォントであってもフォントプリロードに必須です。