display=swap
Google Fonts が提供するタグがdisplay=swapをサポートし、デフォルトでこのパラメーターが付与されるようになった。
https://fonts.googleapis.com/css?family=Roboto&display=swap
このパラメーターがあると@font-faceにfont-display: swap;が適応された状態の CSS が配信されるようになる。
FOIT 状態が続くこともなくなり、webfontloaderなどの遅延読み込みライブラリを利用しなくて良くなった。
font-display
font-display 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/font-display
font-display: auto;
デフォルトでブラウザの挙動に準拠するfont-display: swap;
フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画される
読み込みスクリプト
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preload"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"
as="style"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"
media="print"
onload="this.media='all'"
/>
1. preconnect
Google Fonts の CSS はfonts.googleapis.comにホスティングされているが、フォントファイル自体はfonts.gstatic.comされている。そのため、preconnect の指定を入れる場合は下記のようにする必要がある。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
2. preload
preloadを利用する。ただ、preload は IE と Firefox（現時点）で使えないため（参考：https://caniuse.com/#feat=link-rel-preload）、`preload`の記述に加えてハックが下記のような記述で必要になる。
<link
rel="preload"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"
as="style"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"
media="print"
onload="this.media='all'"
/>
ハック
- CSS を
media="print"で印刷用スタイルとして記述する。ブラウザは印刷用スタイルシートを非同期にダウンロードする - 読み込みが完了したら
media属性を変更して CSS を読み込ませる