- This topic has 13 replies, 3 voices, and was last updated 1 year, 1 month ago by Tom.
November 22, 2019 at 11:11 am #107298724xstudio
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/q0qlulNovember 22, 2019 at 5:04 pm #1073242TomLead DeveloperLead Developer
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?December 2, 2019 at 12:44 am #108902024xstudio
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.December 2, 2019 at 4:08 am #1089306DavidStaffCustomer SupportDecember 8, 2019 at 1:46 pm #109808924xstudio
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?December 8, 2019 at 3:37 pm #1098142TomLead DeveloperLead Developer
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?December 9, 2019 at 1:49 am #109836824xstudio
Yeah, I have PAUSED Cloudflare and the issue is the same. The source is the same as it was when Cloudflare was enabled.December 9, 2019 at 10:11 am #1098959TomLead DeveloperLead Developer
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.December 9, 2019 at 1:51 pm #109917524xstudio
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 🙂December 9, 2019 at 7:59 pm #1099393TomLead DeveloperLead Developer
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.December 9, 2019 at 11:30 pm #109947124xstudio
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/q0qlulDecember 10, 2019 at 9:38 am #1100108TomLead DeveloperLead Developer
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?December 10, 2019 at 2:33 pm #110036224xstudio
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!December 10, 2019 at 5:37 pm #1100447TomLead DeveloperLead Developer
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?
- You must be logged in to reply to this topic.