font-display とは？

それはFOIT（Flash of Invisible Text）と呼ばれる現象だよ。ブラウザがWebフォントのダウンロードを待っている間、テキストを非表示にしてるんだ。font-displayプロパティで制御できるよ

swapは「まずシステムフォント（端末に入ってるフォント）で表示して、Webフォントが読み込めたら差し替える」という戦略だよ。テキストが消えることがなくなるからFCPが改善するんだ

いいところに気づいたね！swapだとフォント切り替え時にレイアウトシフトが起きることがある。それが気になるならoptionalを使う手もあるよ。optionalは通信が速ければWebフォントを使い、遅ければシステムフォントのまま表示する賢い戦略なんだ

多くの場合はswapで十分だよ。Google Fontsもデフォルトでswapをつけてるしね。ブランドフォントなどデザイン上どうしても必要ならblock、パフォーマンス最優先ならoptionalがおすすめ。size-adjustプロパティを併用するとフォント切り替え時のズレも軽減できるよ

@font-faceの中でこう書くよ。`@font-face { font-family: 'MyFont'; src: url('myfont.woff2'); font-display: swap; }` これだけ！Google Fontsを使うなら URLに `&display=swap` をつけるか、最近のGoogle Fontsはデフォルトでswapが入ってるから確認してみてね

fallbackはswapより待機時間が短いバランス型だよ。swapは「システムフォントで即表示 → いつまでもWebフォントに切り替え待ち」だけど、fallbackは「約100ミリ秒だけ非表示にして読み込みを待ち、3秒以内にダウンロードできなければシステムフォントを使い続ける」という戦略なんだ。フォント切り替えのちらつきを減らしつつ、ある程度Webフォントを使いたいときに向いてるよ

font-displayはFCP（First Contentful Paint）とCLS（Cumulative Layout Shift）の両方に関係するよ。blockを使うとFOITが起きてFCPが悪化する。swapはFCPは改善するけど、フォント切り替え時にレイアウトがずれてCLSが悪化する可能性がある。optionalやfallbackはCLSも抑えやすい。GoogleのLighthouseもfont-displayの設定を評価項目の一つにしているよ

@font-faceにもう一行追加するだけだよ。`@font-face { font-family: 'MyFont'; src: url('myfont.woff2'); font-display: swap; size-adjust: 105%; }` みたいに、フォールバックフォントと大きさを合わせてCLSを0に近づけられる。たとえばNoto Sans JPとシステムフォントの文字幅の差を測って調整すると、切り替えてもほとんどずれなくなるんだよ

日本語フォントはファイルサイズが英語フォントの10〜50倍になることが多いから、font-displayの選択がより重要になるよ。Noto Sans JPはサブセット化しても2〜3MBになることもある。そのためunicode-rangeで必要な文字だけ読み込んだり、Google Fontsのtext=パラメーターで使用文字を絞り込んだりする工夫と組み合わせるのがベストプラクティスだね