Skip to content

Font Display Property

Posted in Education, and WhoCodeFirst

The font display property has five potential values.

font-display: auto;

The default value, the font display mode is set by the browser and chosen from the four options below.

font-display: block;

The browser will show invisible text for up to 3 seconds, it will then display the Google Font if it has downloaded.

font-display: swap;

The browser will initially show a fallback font, then once the Google Font has downloaded it will swap the fonts.

font-display: fallback;

The browser will initially show a fallback font, if the Google Font is downloaded within 3 seconds it will swap the fonts. If the Google Font can’t download in 3 seconds or less it will continue using the fallback.

font-display: optional;

This mode is very similar to fallback, except the wait time is a lot lower. If a font hasn’t downloaded in 100ms the fallback will persist. To realistically load in 100ms a Google Font must already be in the visitors cache.

If you enjoyed this article, Get email updates (It’s Free)
Translate »