Fonts are not always loading

The fonts on our website aren’t always loading, but when we turn CloudFlare into Development mode, it works 100% of the time when we have tested it.

I’ve included:
01-homepage-right-fonts.jpg – This is what its’ suppose to look like.
02-homepage-wrong-fonts.jpg – This is what it loads up sometimes.
03-homepage-wrong-fonts-inspect-element - This is what comes from the inspect element
04-homepage-wrong-fonts-console - These are the console errors.
05-08 – These are the backend settings that I’ve configured, we’re using Avada Theme.

The website is https://makerkids.com








Thank you in advanced for your help.

In your Dev Tools window, I’d also take a look at the Fonts section of CSS, then take a look at the Network tab to see if the font file is loading.

1 Like

After a long testing on your website I doubt that’s not true.

When I check the “Network” section and check what fonts are getting loaded at all I see these:

image

There is no “Montserrat” font getting loaded in first place. So I checked the Console Log and could not find anything related to fonts. SO everything that should load is getting loaded properly.

Also, I have seen some of these inline CSS notations:

style="font-size:28px;line-height:1.2;color:#000000;font-family:"Montserrat";font-weight:800;"

&

style="font-family:"Montserrat";font-weight:900;margin:0;font-size:1em;letter-spacing:1px;color:#000000;--fontSize:42;line-height:1.25;"

&

style="font-family:"Montserrat";font-weight:400;margin:0;font-size:1em;letter-spacing:1px;color:#000000;--fontSize:22;line-height:1.25;"

But nowhere was a “Montserrat” font specified in any CSS file. So you are declaring some texts as a font which you do not provide or which you do not provide links to download it from. That will result in unformatted text, specially if not even a fallback (in CSS) to any other local font is given.

One option could be: your Theme wants to place that missing CSS snippet into an existing CSS file and as Cloudflare has cached it and serves it from cache this change will not be visible for users which hit a Cloudflare Pop which does have this particular file cached. Which in your case is even possible as you configured Cloudflare to treat a request with a different query string as the one in cache as the very same file while a change in the query string normally should implicate a change in content.

But also this was not the case as my first call was a miss in Cache and I additionally tried from some VPN locations to make sure I do not hit the Cloudflare Cache.

So I am pretty sure the problem is on your side. To debug this I would recommend doing this:

  1. Clear ALL Caches:
    1.1. Cloudflare (Purge Everything)
    1.2. Purge all Applications and Server Caches
    1.3. Purge other proxy Caches if implemented
  2. If it still does not load please implement this snippet somewhere in your CSS code (the more on top the better)

Modern Browser support

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display:block;
  src: local(''),
       url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WlhzQ.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display:block;
  src: local(''),
       url('https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_c5H3gnD-A.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display:block;
  src: local(''),
       url('https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_epG3gnD-A.woff') format('woff');
}

Then save and try again. This should work immediately as soon as added and propagated. If it works please still do the following:

  1. file a report at the vendor of your theme to report this bug, as it seems not to work (or at least not with Cloudflare)
  2. serve the fonts from your server and not from Google to prevent the additional lookup
1 Like

Hey,

We tried the other solutions, didn’t work.

We tried this solution, and so far, it seems to be working.

We’ll keep an eye out and see.

Martin, I was also wondering how did you find the static link for the specific font? I want to look for Poppins.


Sorry, I was not available for some days.
I saw you already have managed to get the direct links - nice to see this.

Still you host your refer to Google, I would recommend hosting your fonts on your own domain. This will give you more control over the resource and saves a DNS lookup.

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