FOUT - Flash of Unstyled Text
What is FOUT?
A FOUT is a Flash of Unstyled Text. When you load a website, you might notice that the text is shown using a different font for a second until the "real" font is displayed, and you might notice a "flash" or "glitch" when the font changes.
Some FOUT is expected to happen when using
font-display: swap because this declaration allows the browser to display a fallback font until the custom one you have selected is loaded. This is very important because it aims to avoid any Flash of invisible text, which is penalized by PSI scores.
According to PageSpeed it is better for user experience to display visible text in a different font, than no text at all.
Having a flash of invisible text is worse for the user's experience and for the website score, so setting the font-display to swap is really important. The downside is its inevitable side effect: the FOUT
WP Rocket sets the font-display to swap in the following cases:
- The Optimize Google Fonts feature will add the
display=swapparameter to the request.
- When either minify CSS or combine CSS is active, WP Rocket will also automatically apply
font-display: swap;to any fonts referred to within CSS files.
- When Optimize CSS Delivery is enabled,
font-display: swap;is added to fonts in the critical path CSS.
How to reduce the FOUT?
First of all, is important to stress that some FOUT is inevitable when using web fonts.
But there are some ways to mitigate this:
- If you are using local fonts, that is, fonts that are hosted on your own domain, you can use our font preloading to mitigate this as much as possible by loading fonts earlier.
- If you are using external fonts, like Google Fonts, there is not much that can be done to “fix” this.
- For both cases, (external and internal fonts) try using a default fallback font that is similar to the final font. This will help in reducing the perception of the FOUT.
If you go from a Serif to a Sans-Serif font, the FOUT will be perceived much stronger than if you go from Sans-Serif to Sans-Serif
For example: if your website uses Open Sans, using Arial as fallback font, will be much better than using Georgia.