font-display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

font-display@font-face アットルールの記述子で、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。

構文

css
/* キーワード値 */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

auto

フォントの表示戦略はユーザーエージェントが定義します。

block

フォントに対して短いブロック時間の後、永続的にスワップ時間を置きます。

swap

フォントに対して非常に短いブロック時間の後、永続的にスワップ時間を置きます。

fallback

フォントに対して非常に短いブロック時間の後、短いスワップ時間を置きます。

optional

フォントに対して非常に短いブロック時間の後、スワップ時間を置きません。

メモ: Firefox では、 gfx.downloadable_fonts.fallback_delay および gfx.downloadable_fonts.fallback_delay_short の設定項目で、それぞれ "short" および "extremely small" の時間が利用できます。

解説

フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時間に分かれます。

  • フォントブロック時間: フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は不可視の代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。
  • フォントスワップ時間: フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。
  • フォント失敗時間: フォントが読み込まれていなければ、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。

公式定義

形式文法

font-display = 
auto |
block |
swap |
fallback |
optional

font-display のフォールバックの指定

css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/example-font.woff) format("woff"),
    url(/path/to/fonts/example-font.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

仕様書

Specification
CSS Fonts Module Level 4
# font-display-desc

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-display

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報