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

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

関連記事

Glitch

Glitch プロジェクトの .git ディレクトリ・サイズを小さくしました

Glitch プロジェクトの .git ディレクトリ・サイズを小さくしました。そのときの作業内容を紹介します。

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …

Web

WordPressの記事ページ (それ以外でも多分OK) に、Google Charts を使って生成したグラフを表示する方法

目次1. はじめに2. やりたいこと3. やり方(1) Google Charts の JavaScript ファイルを読み込ませる(2) グラフを表示させたい箇所に div タグを記述する(3) グ …

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。

web development

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する方法を紹介します。