Webフォントが使いたい！
でもCore Web Vitalsに影響が出てユーザー体験を損なう要因になっている可能性があります。
Core Web Vitals（コアウェブバイタル）とは、ユーザー体験（UX）をより優れたものにするためにGoogleが提唱している指標のことで、以下の３つの指標で構成されておりSEO評価に影響を及ぼします。
- LCP（Largest Contentful Paint ）：ページの表示速度
- FID（First Input Delay ）：サイト内で最初にアクションを起こした時の反応速度
- CLS（Cumulative Layout Shift ）：読み込み中に起こるレイアウトのずれ
Webフォントの読み込みが遅いと反映されたとき文字の大きさや幅が変化してレイアウトがずれることがあります。
その対策となるのがこれです。
【font-display:optional】
- @font-face {
font-family: ‘Raleway’;
src: url(“../fonts/Raleway-BoldItalic.ttf”);
font-display: optional;
}
Webフォントの読み込みに0.1秒(100ms)以上かかる場合はローカルフォントで描画してくれます。
※もしデザイン的にどうしてもWebフォントを表示させたい場合はPreloadを用いて先に読み込んだりする必要があります。
↓参考サイト
[blogcard url=”https://note.com/taira_daishiro/n/nf037bf199ed8″]