font-display
webフォントの読み込み
ローカルフォントがあれば読み込みに時間はあまりかかりませんが、webフォントの場合はローカルフォントと比べると読み込みに時間がかかってしまいます。
この影響でページのロードをしてからテキストが表示されるまでの間にユーザを待たせてしまう事があります。
font-display
というCSSプロパティで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの表示をする事ができます。
使用例
@font-face { font-family: "sample"; font-weight: 400; font-style: normal; src: url("font.ttf") format("ttf"); font-display: swap; }
p { font-family: "sample", sans-serif; }
これによってpタグによって表示されるテキストは設定されたwebフォントが読み込まれるまでは一時的に、sans-serifでテキストの表示をされるようになります。