What does font-display mean? With the font-display declaration in your CSS you can customize your rendering strategy and work around webfont loading issues without using JavaScript.
Lighthouse found in December 2018 that, thanks to «font-display», 61.1% of pages avoid the flash of invisible text (FOIT) when loading fonts.
Watch how the value of Font Display evolves on HTTP Archive .
auto: This is the initial value of font-display australia email list and tells the browser to display the font following the browser's default path.
block: with this keyword, while waiting for the web font, a short block period is set. If the set time is exceeded, if the font is not yet available, it is rendered with the fallback font
swap: there is not even a blocking period here, because the browser directly renders the text with the fallback font. The rendering path with the original font starts only when it is completely downloaded.
fallback: with this keyword you set a short blocking period, if the web font is not downloaded within this period, for the entire visit of the site, the user will see an alternative font.
optional: this is an additional precaution compared to the previous one. If the font is not downloaded within the blocking period, for the entire duration of the visit to the site, the browser will report the substitute character, but will download the web font in the background, to make it immediately available in case of future visits to the site.
Make sure text remains visible while web fonts load
Using font-display:swap is one of the 15 website performance tips revealed at Google I/O '19.
This way you can ensure that your text is visible to users when web fonts load and PageSpeed Insights won't flag any errors.