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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …

Web

インストールが可能になるための最低限のウェブサイト(PWA)を作る

インストールが可能になるための最低限のウェブサイト(PWA)を作る方法について説明します。

Web

ツールを公開するWebサイトを作っています

いろいろなツール(Webページ上で提供できるツールに限ります)を公開するサイトを作っています。 Tools on Web https://tools.laboradian.com/ 載せているツールは …

Web

ウェブブラウザがページを取得して表示するまでの流れ

目次1. はじめに2. Chrome デベロッパーツールの [Network]パネル3. リソース毎の処理の流れ4. その後の流れ5. DOMContentLoaded と load イベント6. グ …

Chrome

Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える

目次1. Chrome のローカルオーバーライド機能とは?2. 使い方1. この機能で使用するローカル側のフォルダーを指定します2. 置き換えるファイルを指定します3. ファイルを編集します3. Ov …