静的マーケティングサイトで Cumulative Layout Shift（CLS） を失点させる典型原因は、ディスプレイ用ウェブフォントがシステムスタックに置き換わる瞬間です。ヒーロ見出しが 4–12 px 縦に動き、価格行がズレ、Lighthouse の CLS タイルが赤くなる一方で画像は完璧、というパターンは 2026 年も依然として多いです。CSS では @font-face 内の size-adjust と ascent-override、descent-override、line-gap-override を使い、最終フォントが到着する前から目標メトリックで行ボックスを組み立てることができます。本稿はジェネレータや MPA で静的 HTML を出荷するチーム向けに、測定手順、@supports による段階的強化、font-display の意思決定表、Safari／WebKit 実機での注意点をまとめます。レスポンシブ画像と LCP、見出しの text-wrap: balance / pretty とあわせて読むと、画像軸とタイポグラフィ軸の Core Web Vitals 予算を同時に締められます。
読み終えるころには、DevTools で記録すべき 3 つの基準値、size-adjust を 90–110% のレンジでスイープする手順、フィールド CLS の P75 アラート閾値 0.1、および MacHTML の公開価格であるクラウド Mac mini（約 1 日 16.9 ドル）を用いた Safari 再現環境の立ち上げ方が手元に残ります。
ウェブフォントが CLS を悪化させる理由
フォールバックのシステムフォントとブランドフォントは、アセント、ディセント、行間ギャップのテーブルが一致することは稀です。font-display: swap でウェブフォントが描画されると、ヒーロ、ナビ、価格表の折り返し行すべてについて行ボックスが再計算されます。クリティカル CSS はインライン化しつつ WOFF2 を CDN から 120–400 ms 遅れて取得する構成では、ユーザーがスクロールを始めた後にスワップが起きやすく、フィールド CLS がラボより悪化しがちです。
対症療法として font-display: block でテキストを隠すと FCP が落ち、ネガティブマージンで無理やり位置合わせすると保守不能になります。メトリック上書きは幾何の不一致を標準プロパティで解消し、200% ズームでも破綻しにくいチューニングが可能です。
メトリック上書きが変えるもの
上書きはグリフのアウトラインを変えず、レイアウト計算に参加する使用フォントメトリックを変えます。ascent-override: 90% は親のフォントサイズに対する割合で上端を定義するイメージです。誤ったパーセントは flex 子やアイコンフォントと混在するナビゲーション全体に波及します。
CSS を触る前に DevTools で次を記録してください：フォールバックの大文字高、ウェブフォントの大文字高、両者の line-height: normal の差。デザイントークンリポジトリに一度書き込めば、各ロケールで同じオフセットを再利用できます。
size-adjust と手動オーバーライド
size-adjust は全体を一様にスケールするブルドーザーで、-apple-system よりウェブフォントが 2–6% 背が高いケースに有効です。ポーランド語やチェコ語でディセンダーが欠ける場合は size-adjust を 96% 前後に保ちつつ descent-override だけを下げます。軸は一度に一つだけ動かし、コミットごとにビジュアル差分を残してください。
ブロック全体を @supports (size-adjust: 90%) で囲めば、未知の宣言で @font-face 全体が無効になる古いエンジンを避けられます。WOFF2 の preload とも両立します。
font-display の組み合わせ
利用規約やドキュメント本文では font-display: optional を優先し、CLS をほぼゼロに近づけます。ヒーロでブランド曲線が必須なら swap とメトリック上書きの組み合わせで、WebPageTest のフィルムストリップ上でスワップがスクロール開始の 40 ms 以内に収まるか確認します。600 字を超える本文に block を使うと、モバイル Safari でテキストが表示される前にユーザーがスクロールし、直帰率が上がります。
アクセシビリティでは VoiceOver で行境界の読み上げが変わらないかを毎回スモークします。多言語見出しと数字が混在するスタックでは 20 分程度の確認枠を確保してください。
最終パーセントはプレビューと本番で同一の @font-face を生成するパイプラインに埋め込み、環境差による手戻りを防ぎます。
Safari / WebKit の注意点
WebKit はリモート WOFF2 のデコードが完了する前でも、最初に利用可能になった段階で上書きメトリックを適用します。CLS には有利ですが、contenteditable 領域のキャレット位置がわずかにずれることがあります。マーケフォントと CMS 編集 UI を同居させる場合は課題トラッカーで別検証にします。安定版 Safari と Safari Technology Preview の差はマイナーバージョン単位で現れるため、フォントのメジャーアップデート週は両方を回してください。
可変フォントで opsz のデフォルトが高い場合は、まず size-adjust を下げてから軸ごとの調整に進みます。
コピー用 @font-face レシピ
@supports (size-adjust: 90%) {
@font-face {
font-family: "Brand Display";
src: url("/fonts/brand-display.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
size-adjust: 96%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
}単ウェイト WOFF2 は 80 KB 以下を目安にし、Apple Silicon ではデコードがおおむね 30 ms、旧世代 Intel Air では 55 ms まで伸びるケースを性能ダッシュボードに書き留めます。
意思決定マトリクス
| シーン | font-display | 上書き | 理由 |
|---|---|---|---|
| マーケヒーロ | swap | size-adjust + ascent/descent | ブランド優先、CLS は上限管理 |
| ドキュメント | optional | 軽い size-adjust | 安定性優先 |
| 等幅コード | swap | システム等幅に合わせる | pre の横揺れ防止 |
| CJK ロケール | swap | 言語別測定 | ラテン値の流用禁止 |
ラボ CLS とフィールド CLS
Lighthouse のラボでは上書きの効果が一発で見えますが、CrUX のフィールド値は最大 28 日遅れます。ページ内で web-vitals を収集し、Safari UA セグメントを切って P75 CLS が 0.1 を超えたらアラートにします。セッションリプレイのサンプリングで、未調整のロングテール URL を特定してください。
予算が限られる場合は、ヒーロテキストがページ全体 CLS の 35% 以上を占める URL から着手すると ROI が高いです。
FAQ
可変フォントでも使えますか？
可能です。既定の軸位置を確認してから size-adjust、その後に軸単位の調整へ進みます。
すべてのウェイトを preload すべき？
ファーストビューに必要なウェイトのみ。preload の乱発は LCP 画像と帯域を奪い、4G プロファイルで 80 ms 遅延することがあります。
サードパーティのフォント CSS は？
外部ホストの @font-face は安全に上書きしづらいため、WOFF2 を自前ホストし CSS を完全に掌握するのが現実的です。
Apple Silicon の Mac mini クラウドは、経営陣のノートと同じ Safari／Core Text のレンダリングパスを提供し、Linux headless の近似から脱却できます。MacHTML のノードは SSH で自動スクリーンショットや WebPageTest スクリプトに接続でき、VNC を選べばデザイナーがフィルムストリップをフレーム単位で確認できます。アイドル時の消費電力はしばしば 12 W 前後で、検証用 mini をフォントスプリントの 2 週間だけ借りるコストは、本番ロールバックの会議時間より安く済むことが多いです。
所有ではなくレンタルにすると、公開価格の約 1 日 16.9 ドルでキャンペーン期間だけ稼働し、終了後は停止できます。メトリック表は Git に残し、ハードウェアを 36 か月の減価償却に載せる必要もありません。
本物の Safari で CLS フレンドリーなフォントを検証
クラウド Mac mini を借り、静的 CSS をマージする前にメトリック上書きと font-display のタイミングを確認しましょう。