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
font-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+ | ✕ | 58.0+ | 11.1+ | 47.0+ |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.