On May 9th it was announced that Google Fonts would support the font-display CSS property.
Note: In the announcement image the parameter is incorrectly labelled ‘font-display=’, the parameter is just ‘display=’.
The integration of font-display had been a heavily requested feature for years. This GitHub request from 2016 amassed hundreds of comments and upvotes.
Why’s it important?
When the font-display property is not set for Google Fonts, the browser waits until the font has been downloaded before showing any text.
That means if your visitors internet connection is slow or there are problems connecting to fonts.googleapis.com, they could be shown a blank space for up to a couple of seconds. This is referred to as the Flash of Invisible Text (FOIT).
How does font-display help?
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.
How do I use this new feature?
To implement font-display when using Google Fonts you just need to add an extra parameter to your request.
https://fonts.googleapis.com/css?family=Roboto
becomes:
https://fonts.googleapis.com/css?family=Roboto&display=swapThat’s all there is to it. I personally recommend using ‘swap’ , but all the values we explored above will work.