1. Webフォントの読み込みと font-display 記述子（概要）
Webフォントを使う場合、フォントファイルを読み込むのに多少時間が掛かるため、その間テキストが表示されないままになります。
適用したい Webフォントとは別のフォントでもよいので、なるべく早くテキストを表示させたい場合は、font-display 記述子を使ってその意思をブラウザに指示することができます。
2. font-display 記述子を使ってテキストをすぐに表示させる方法
これを実現するには、以下のように @font-face の中に font-display: swap; を記述するだけです。
@font-face {
font-family: 'フォント名';
font-display: swap;
src: url(path/to/フォントファイル) format('フォーマットの種類');
}
デモページを用意しました。
3. font-display 記述子の詳しい説明
font-display 記述子についてもう少し説明しておきます。
font-display 記述子では、フォントをダウンロードする過程を3つの期間に分けて考えます。
3つの期間
| 順番 |
期間 |
説明 |
| 1 |
フォントブロック期 |
- この期間にフォントがダウンロードできていない場合は、不可視の代替フォントで表示する（つまり何も表示されない）。
- この期間にフォントがダウンロードできれば、そのフォントでテキストが表示される。
|
| 2 |
フォントスワップ期 |
- この期間にフォントがダウンロードできていない場合は、代替フォントで表示する。
- この期間にフォントがダウンロードできれば、そのフォントでテキストが表示される。
|
| 3 |
フォント失敗期 |
- この期間のはじめの時点でフォントがダウンロードできていれば、そのフォントで表示されるが、そうでなければロード失敗となり、代替えフォントでの表示となる。
|
font-display の値には以下の種類があり、それぞれ上記の3つの期間の扱い方が異なっています。
font-display の値
| 値 |
説明 |
| auto |
- ユーザーエージェントのデフォルト表示戦略を使用する。
- ほとんどのブラウザは、block に似た動作になっている。
|
| block |
- 短いフォントブロック期（3秒程度） → 無限の フォントスワップ期
- つまり、フォントがダウンロードされない状態が続けば、3秒までは何も表示されない。それ以後は、代替えフォントで表示され、目的のフォントがロードされ次第入れ替わる。
- 目的のフォント以外ではなるべく表示したくない場合に使います。
|
| swap |
- フォントブロック期（0秒） → 無限の フォントスワップ期
- つまり、すぐさま代替えフォントでの表示がはじまり、目的のフォントがロードされ次第フォントが入れ替わる。
- 「できるだけ早くテキストを読んで欲しい」+「読んでる途中でフォントを入れ替えても差し障りがない」場合に使用する（ロゴの表示など）。
|
| fallback |
- 非常に短いフォントブロック期（おおよそ100ms以下）→ 短いフォントスワップ期（おおよそ3秒）→ フォント失敗期
- つまり、フォントがダウンロードできていないはじめのうちは代替えフォントで表示され、目的のフォントがダウンロードされ次第入れ替わる。しかし、ダウンロードに時間が掛かりすぎると代替えフォントの表示のままになる。
- 「できるだけ早くテキストを読んで欲しい」+「読んでる途中でフォントを入れ替えて邪魔したくない」という場合に使用する。
|
| optional |
- 非常に短いフォントブロック期（おおよそ100ms以下）→ フォントスワップ期（0秒）→ フォント失敗期
- つまり、ほぼ代替えフォントでの表示になる。そのため目的のフォントのダウンロードさえもするかどうかはブラウザ次第となる。
- フォントのダウンロードはあくまでも「オプション」という扱い。
|
※ Controlling Font Performance with font-display | Google Developers の内容を元にしていますが、いくつか説明文を追加しています。
この5種類を試すためのデモページを用意しました。
参考
ラボラジアン 
