CSS font-display Property

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

• auto
• block
• swap
• fallback
• optional

The typography was 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 reduce the website 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 property telling the browser what we prefer: FOUT or FOIT.

Initial Value	auto
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	No.
Version	CSS1
DOM Syntax	object.style.fontDisplay = "swap";

Syntax¶

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

@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 downlaoded */
  font-display: optional;
}

Values¶

Value	Description
auto	The font display is defined by the browser.
block	Briefly hides the text until the font has fully downloaded.
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 parent's element.