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:

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 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 parents element.

Browser support

60.0+ x 58.0+ 11.1+ 47.0+


Do you find this helpful?

Related articles