Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

投稿日:2019年4月8日 更新日:

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種類を試すためのデモページを用意しました。

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Components

1つのWebページに複数のHTML要素サンプルを記述する

1つのWebページに複数のHTML要素サンプルを記述する方法を紹介します。

Web

Basic認証の設定手順

Basic認証の設定手順について説明します。

Chrome

Chrome の通信ログ(TCP/IPも含む)を記録する

Chrome の通信ログ(TCP/IPも含む)を記録する方法を紹介します。

DokuWiki

DokuWiki が最新版なのに upgrade now! が表示される場合の対処法

目次1. DokuWiki が最新版なのに upgrade now! が表示される2. 対処方法その13. 対処方法その24. おわりに参考 1. DokuWiki が最新版なのに upgrade n …

Web

HTML文書の文字エンコーディングに UTF-8 を使うことが公式に明文化されました

HTML文書は文字エンコーディングUTF-8でなければなりません – 水底の血 という記事で知ったのですが、「HTML文書の文字エンコーディングは UTF-8 でなければならない」という意 …