Webフォントの最適化01「FOIT・FOUT」にて、Web フォントの課題の一つである FOUT(フォントが入れ替わる際のチラツキ)を紹介しました。 Web フォントの利用の際、切り替わりによってテキストの行数が変化することなどにより、ページのレイアウトが変化してしまいます。これにより、テキストの読み取りの阻害や誤クリックなどのユーザー体験の低下や、CLS(Cumulative Layout Shift、Google が定めるページ読み込み時のレイアウトのズレの大きさの程度を表す指標)スコアの上昇につながってしまいます。 この解決の一助として、CSS の @font-face ルールでは、size-adjust 、ascent-override 、descent-overrideといった設定があります。 これらはフォントの拡大率・アセンダ・ディセンダといった、基本的な寸法を調整するもので