Flash of unstyled text with Google Fonts and Cloudflare

I’m using Google Fonts on my site which causes a flash of unstyled text, or FOUT thing. So I’m using this script –

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script>
      WebFont.load({
        google: {
          families: ['Inter:300,400,700,800']
        }
      });
    </script>

– with a loading image to prevent that.

Cloudflare, though, seems to override that in some way. With Cloudflare activated on my site, I’m getting the FOUT immediately on page load and then after the page has loaded, the loading image appears for a moment. Is there any way to prevent that situation so I get the loading image as normal on page load and the site loads behind without FOUT? Thanks.

Okay, I think I’ve sorted it out with data-cfasync=“false”.

1 Like

This topic was automatically closed after 31 days. New replies are no longer allowed.