Fonts not loading sometimes

Hi,

For some reason when we turn on Cloudflare caching, the fonts on our site sometimes load, and sometimes does not and defaults to a default font that isn’t visually appealing. Whenever we turn off Cloudflare caching, the font issue doesn’t appear.

We have tested this with the Development Mode ON, and in the 3 hours, fonts have remained perfect.

Would anyone have any insights on why this may be the case? Perhaps a setting inside Cloudflare that we need to turn on/off?

Image to show NO and YES: font loading issue - Album on Imgur

Website URL: https://makerkids.com

That first sounded for me like a font-display issue when you chose fallback or optional. But actually your font-display is controlled by Google-Fonts and automatically set to swap which is good as it always displays when loaded.

The only two fonts which are loaded directly from your domain (and therefore CLoudFlare can affect) are:

  1. https://makerkids.com/wp-content/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.woff2
  2. https://makerkids.com/wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff

And both are ATM devlivered from CLoudFlares Cache and working fine for me.

Anyway the font you showed in your screenshot is Montserrat which gets loaded directly from Google, even if you use CloudFlare cache.

So normaly the only chance CloudFlare is affecting your fontload is by compressing the CSS file where the @font-faces are defined.

But before I judge here, please try the following:

  1. start Chrome
  2. open Dev-Console
  3. reload page as long as you see this misbehaviour again
  4. show us the console log
2 Likes

We will try to replicate this and then dev-console the images and paste it here.

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.