CLS Issues

Hi there,

GP Premium has the font library module which allows you to locally install Google fonts.

If you do not have GP Premium, then try follow this instruction to install Google fonts locally:

https://docs.generatepress.com/article/adding-local-fonts/

I would recommend only install the font weight that you actually use to reduce the size of the font file.

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.

Hi there,

Try adding this line inside the function:

$mimes['woff2'] = 'application/font-woff2';

The retry the upload.

Thanks Alvind. There seems to be some syntax error in this line, as WP shows.

I just removed the #091 and it worked like charm. Thanks a lot.

Glad to hear that!

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.

Hi there,

in your @fontface CSS you have the font-display: swap; property.
Change that to:
font-display: auto;

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.

Go to generateblocks > settings, toggle the Disable Google Fonts option.

If any GB block has the font-family set to Roboto, remove it from the block.

Hey Ying, the Google Fonts are already disabled in the GenerateBlock settings. Still, I am seeing the render blocking issue fpr googleapi: https://fonts.googleapis.com/css?display=swap&family=Roboto%3A300%2C400

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.

Glad to hear you got it working !