You just ran a performance audit on PageSpeed Insights, and Lighthouse has recommended: “Еnsure text remains visible during webfont load.”
The issue occurs when the fonts you use on your page do not exist on your visitor’s device, meaning they first need to be downloaded to load.
What happens is some browsers hide the text until the fonts are loaded to address this loading gap, resulting in a flash of unseen text. This hurts the user experience on your web pages and adds to why a site visitor might abandon your website.
How NitroPack Can Optimize Your Fonts
Improving web performance, and especially font behavior is a challenging task.
Apart from all our effective features like:
Global CDN
GZIP and Brotli Compression
HTTP/2 Compatibility
Deferred loading of fonts
Critical CSS
NitroPack now allows you to configure default font rendering behavior.
This can be done via our setting called “Override font rendering behavior,” found in the “Fonts” menu:
You can choose between five options:
Auto
Allows the browser to use its default method for loading, which is most often similar to the block value.
Block
Instructs the browser to briefly hide the text until the font has fully downloaded. More accurately, the browser draws the text with an invisible placeholder and then swaps it with the custom font face as soon as it loads. This is also known as a “flash of invisible text” (FOIT).
Swap
Gives the font face an extremely small block period.
It instructs the browser to use the fallback font to display the text until the custom font has been fully downloaded. This is also known as a “flash of unstyled text” (FOUT).
Fallback
Gives the font face an extremely small block period and a short swap period.
Acts as a compromise between the auto and swap values. The browser will hide the text for about 100ms and, if the font has not yet been downloaded, will use the fallback text. It will swap to the new font after downloading, but only during a short swap period.
Optional
Gives the font face an extremely small block period and no swap period.
Like fallback, this value tells the browser to hide the text initially, then transition to a fallback font until the custom font is available. However, this value also allows the browser to determine whether the custom font is even used at all, using the user’s connection speed as a determining factor where slower connections are less likely to receive the custom font.
The font display timeline is based on a timer that begins when the user agent attempts to use a given downloaded font face.
As every website has different configurations and settings, you can switch between modes, clear your website’s cache, and test which one would best fit your website.
By default, NitroPack uses the “swap” method mentioned above, which we believe is the setting that suits most of the websites out there.
📌 If you need any assistance or have questions, reach out to our support team at [email protected] or via the live chat.