[Support request] Locally Hosted Fonts and some elements hooks not working on firefox

[24xstudio]

Hey,

I am facing this issue where locally hosted fonts and some element hooks are not working on Firefox, while everything is working fine on Chrome.

Here is the screenshot of the issue on Firefox: https://prnt.sc/q0qlul

[Tom]

Hi there,

This is strange, check out your website source in Chrome vs Firefox – they’re different. I assume that some necessary CSS isn’t loading in Firefox.

Must be a plugin/service you’re using. Any caching/minifying plugins? Cloudflare/Rocket Loader maybe?

[24xstudio]

Yes, I have tried after disabling the rocket loader, auto minify and also cleared all cache files including the Redis cache.

I really don’t know why I am getting this error.

[David]

Hi there,

looks like you have Cloudflare enabled as well – any chance you can disable that?

[24xstudio]

Yeah, I checked after disabling the CF, rocket loader and the cache plugins too. Nothing worked.

Maybe this is the culprit in GP main CSS file? Check the SS: https://prnt.sc/q80s1c

Maybe it is not reading the inherit?

[Tom]

That CSS wouldn’t cause any issues like this.

Your source codes are still completely different between Chrome/Firefox. Figuring that out should fix the issue you’re having. When you disable rocket loader/cloudflare etc.., do the sources match?

[24xstudio]

Yeah, I have PAUSED Cloudflare and the issue is the same. The source is the same as it was when Cloudflare was enabled.

[Tom]

It must be something else causing the source to change, then. Server caching? A caching/minifying plugin? The only way to figure out what’s going on is to make it so the source between browsers matches. Right now it’s impossible to debug as the HTML is different.

[24xstudio]

Hey,

The culprit is WP Rocket plugin. I have enabled Critical CSS which is causing the issue.

What do you think about how I can do to resolve the issue.

Note: I have disabled the critical CSS so that you can check from your end.

Thanks 🙂

[Tom]

You might need to exclude your custom CSS containing the local fonts from the critical CSS. I don’t know a lot about WP Rocket, but that should be possible.

[24xstudio]

It’s not about the fonts only.

Some hooks were also not working.

Here is the screenshot of the issue on Firefox: https://prnt.sc/q0qlul

[Tom]

The search icon is due to the necessary CSS not loading. Perhaps the critical CSS they’re loading is missing CSS which is actually critical?

Not sure what the other red boxes are showing?

[24xstudio]

The issue is whenever I am trying to create critical path CSS it does not include my fonts.

I have disabled the WPRocket and using third party site to generate the CSS path: https://www.sitelocity.com/critical-path-css-generator

I am stuck in no man’s land now!

[Tom]

So where are you adding your local fonts CSS? Is there any way to tell WP Rocket to include it in the critical CSS? I’m afraid I’m not much help here as I don’t know enough about how WP Rocket works/generates critical CSS. I assume there’s a way to choose what is and isn’t added?

[Author]

Posts