I got some CLS issues with google fonts. I am a non-technical person and want to know how to resolve this issue. I went through some related issues on this forum but could not get a clear idea. A straightforward step-by-step to resolve it would be very helpful. The font that I used in this grid is Nunito Sans with “Use Google Fonts API” box checked and “Enable Dynamic Data” is also checked. The pagespeedinsights score for Desktop is 0.185 and for mobile, it is 0.096.
Thanks Ying. I have the free theme. I followed the steps and added the add_filter function in the code snippet and activated it. But WP does not let me upload the font files. What can be done in this case? Please see the images attached.
I was able to install the font ‘IBM Plex Sans” locally, as per the instructions sent. But I am still getting 2 CLS errors: 1. gb container error 2. <p> error What can be done to remove these two. I have my intro para in a container structure.
Thanks David. I changed the @fontface to “auto” in Additional CSS. On mobile, CLS is now in green, but for Desktop, there are still 2 font errors, one in the GenerateBlock’s QueryLoop in which I inserted a Grid and the other in the navigation bar. I have locally installed IBM PLEX Sans font (with variations 300 and 500 only). But it seems to load “Roboto” font from gstatic (visible when I hover the gstatic fonts link under CLS error section on PageSpeed Insights) and may be that is causing these shifts.
How can these 2 errors be resolved. In wp rocket, under the Preload section, i also added the local URL path of the font that i had installed, i.e. IBM Plex Sans. Also, sometimes, the pagespeed shows only my locally installed fonts under the error and at other times, it shows gstatic fonts also.
That screenshot shows the issue is related to the Roboto font – are you loading that in the theme? As I don’t see it. Roboto is commonly loaded by Adverts and some other 3rd parties scripts. Which may whats making that request … which the theme has no control over.
Hey David, Thanks for replying. I resolved the CLS issue by decreasing the font size; do not know how that worked. Regarding the Roboto font, I got it blocked with the OMGF plugin which detected it in the stylesheet. So, it worked, atleast for now.
