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.
Top comments (0)