Ensure Text Remains Visible During Webfont Load

If you have ever requested a web page and noticed that the text does not appear as the page starts to be painted, this is referred to as FOIT, or Flash of Invisible Text. This is related to the size of the font files used on the page. The browser keeps them “hidden” for a brief period until the fonts are downloaded. This is also like FOUT, or Flash of Unstyled Text. This occurs when text is appears on the page, but then changes to a different style. This is also due to fonts not loading in time. Again, these are not major performance issues, however, to the user, it looks like your page is blank and could cause unnecessary content layout shifts that we had talked about earlier in this guide. And if these fonts are being called through an external third-party URL, then it could be causing more issues than you think.

There are a few different methods that web developers can take to ensure text is not invisible to users. One of the easiest ways is to temporarily show the system font. Once the custom font is ready, it will replace the system font. This optimization ensures that there is at least some text there for the user to see. Another common method is to preload key requests. We will talk about this optimization later in this guide, but in terms of pre-loading webfonts, you can set your fonts to be retrieved sooner in HTML, especially for key above-the-fold text. This can also help avoid any content and text layout shifts that would otherwise occur.