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=swap parameter to the request. 
• When minify CSS is active, WP Rocket will also automatically apply font-display: swap; to any fonts referred to within CSS files.
• When Load CSS Asynchronously is enabled, font-display: swap;is added to fonts in the critical path CSS.
• When Remove Unused CSS is enabled, font-display: swap;is added to fonts in the used 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 not using Remove Unused CSS, and you are using local fonts, that is, fonts hosted on your own domain, you can use our font preloading to mitigate this as much as possible by loading fonts earlier.
• If you're using Remove Unused CSS, the used fonts will be automatically preloaded.
• 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 a fallback font, will be much better than using Georgia.