CSS font-display Property

The font-display descriptor defines how font files are downloaded and displayed by the browser. This descriptor has the following values:

• auto
• block
• swap
• fallback
• optional

Typography used to be limited to local fonts where the only available fonts were the ones called "web-safe". Then came @font-face rule allowing to upload font files to a server and write a set of rules naming the font and telling the browser where to download the files. It gave rise to the services which allowed to use custom fonts. But these custom font files can be large and increase page load time.

There was another concern connected with FOUT ("flash of unstyled text"). Browsers would display a system font while the custom font was being downloaded. This gave cause for concern as web designers viewed it as the user experience hijacking. Today browsers commonly hide the text until the custom font is downloaded, which is referred to as FOIT ("flash of invisible text").

But none of the above-mentioned methods is great. Instead, now there is the font-display descriptor telling the browser what we prefer: FOUT or FOIT.

Initial Value	auto
Applies to	@font-face rule.
Inherited	No.
Animatable	No.
Version	CSS Fonts Module Level 4
DOM Syntax	object.style.fontDisplay = "swap";

Syntax

Syntax of CSS font-display Descriptor

font-display: auto | block | swap | fallback | optional | initial | inherit;

How to use the @font-face rule?

@font-face {
  font-family: 'MyWebFont';
  /* Define the custom font name */
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  /* Define where the font can be downloaded */
  font-display: optional;
}

Values

Value	Description
auto	Font display is defined by the browser.
block	Specifies a short block period and an infinite swap period.
swap	Gives the font face a very small block period and an infinite swap period.
fallback	Gives the font face a very small block period and a short swap period.
optional	Gives the font face a very small block period and no swap period.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Practice

What are the possible values for the CSS property 'font-display'?

blockautoswapfallbackoptionalnone