Flash of unstyled text - fallback fonts loads initially then switches to google font

Community resources Bugs
7

Hi @suguna and @Davidlin_ch12,

Sorry for the long delay, I was doing some checking on this, and this behavior may be due to a phenomena called FOUT (a flash of unstyled text).

Read more about this here: Quick Tip: Avoid FOUT by Adding a Web Font Preloader

One solution for this is to use a custom style in the Header of the site, to set the html to 0% opacity while the automatic wf-loading class is added by google fonts while loading the fonts.

<style> 
    
 html.wf-loading * {
   
        opacity: 0;
    }
    
</style>

After adding the CSS above, then republish the site, and the momentary font fallback should be solved.

I hope this helps!

12 Likes