Eliminate Flash of Unstyled Text/Content (FOUC) e.g.: font loading

Problem description

Ever notice that because fonts on your sites could take longer to load than the page itself, causing the page from displaying default/fallback fonts to suddenly “flash” with the loaded font?

Menu_Jerking

This is called a Flash of Unstyled Content:

A flash of unstyled content (FOUC, also flash of unstyled text or FOUT) is an instance where a web page appears briefly with the browser’s default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift may be distracting.
Wikipedia

Here is a simple one-minute fix:

  1. Copy and paste this in the beginning of Site Settings > Custom Code > Header Code:

    <style>
    html { opacity: 0; transition: opacity 0s ease-out; }
    html.webflow-loaded { opacity: 1; }
    </style>
    <script>
    var Webflow = Webflow || [];
    Webflow.push(function() { $('html').addClass('webflow-loaded') });
    </script>
    

Optional steps:

  • Copy and paste this in Site Settings > Custom Code > Footer Code:

     <noscript><style>html{opacity:1;}</style></noscript>
    

    This is just a failsafe in the very rare case that the visitor (0.00013% of all internet users) has JavaScript disabled - but then we would have a bigger problem as Webflow components and interactions will not work for them (so you can actually ignore this).

  • If you want a transition when the page is loaded, change 0s to a small number like 0.15s / 150ms. I’m personally using 100ms on my website.


Also, feel free to contact me for further code help and/or customization of third-party plugins

9 Likes

Thanks for taking the time to write this up @samliew.

I have only seen this a handful of times, but I’ll save this in the event I run into it on a project moving forward. Cheers!

Do we need to put it after on the header.php document ? Because when I do it makes my website just not usable… Could you be more precise on where to put this code please ? 'Would save my life.

This forum is only for discussing webflow projects only. There is no guarantee that it will work outside of webflow.

Another tool: to make FOUC less jumpy. Now you can use the following to to match the flow of the web fonts used as much as possible. It also works with the fonts activated by the system/font library app/… (at least on MacOS). This is the tool: Font style matcher