font-display: swapでWebフォントの読み込み設定

web.devのLighthouseでサイトのパフォーマンスを計測したときにfont-displayを使えと教えてくれたので調査したときの覚書。

font-displayはブラウザがフォントを表示するまでの動作を指定。
IE以外は主要ブラウザで対応済み。

• font-display - CSS: カスケーディングスタイルシート | MDN

Webフォントの場合は「displya:swap;」にして、読み込みをブロックしないように設定した方がいい。

• Ensure text remains visible during webfont load | web.dev

【関連記事】

• rel="preload"でWebフォント(@font-face)を先読み