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?
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:
-
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 like0.15s
/150ms
. I’m personally using100ms
on my website.
Also, feel free to contact me for further code help and/or customization of third-party plugins