chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

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でテキストの表示をされるようになります。

Can I use... Support tables for HTML5, CSS3, etc