Hi @danishsq
We’re loading the Google fonts dynamically via JavaScript. So basically here’s how the loading works:
– The browser requests the page
– the page requests the CSS and JavaScript files, including our file
– our code in our JavaScript file calls this Google font
I checked your page and I can see that you’re using Autoptimize which combined and all of the JavaScript files on your site into one file, so the request is entirely handled by this Autoptimize generated JavaScript file. So the https://fonts.googleapis.com/css?family=Bree+Serif:300,400&subset=latin link loads the way Autoptimize tells it to load.
So the loading will work this way:
– The browser requests the page
– The page requests Autoptimize’s JS file (which contains all your site’s JS code including ours)
– our code in Autoptimize’s file requests the Google font
The best I can suggest is looking at Autoptimize’s settings and adjust the way it loads the JavaScript files.
I reached out to Autoptimize also but as the google font settings are inside the plugin Autoptimize is not able to optimize the css delivery of this google font. That is the reason why it is creating issues on google page insights
You can also see that the critical css path is just breaking after the google fonts, thats why the site is not getting optimized fully.
In Autoptimize I have already selected the option to remove google fonts, therefore all other fonts it is compressing and removing however as this is inside the plugin. Autoptimize is unable to read the font and compress it. Therefore the issues lies with font not autoptimize
And as you correctly mentioned I am using Autoptimize to optimize my website through “Inline and Defer CSS” option by deferring the css files after the page load however because of google font that is not getting completed.
Do you think using standard font like “Arial” will help in resolving this CSS issue ?
Hi @danishsq
The fonts are loaded via JavaScript so optimizing the CSS codes will do basically nothing – it’s the JavaScript optimization you should try tweaking.
You could try disabling the “Let Autoptimize also extract JS from the HTML.” this way the Google font calling codes would be loaded on the page load, so maybe that would solve the problem.
If you would need further help with this, please reach out directly: https://smartslider3.com/contact-us/ and refer to this topic.
