An SEO professional was concerned about font loading issues (external fonts) that were causing CLS (a Core Web Vitals attribute called Cumulative Layout Shift).
Their question is a simple one: can fonts cause CLS issues?
John answered that yes, fonts can cause CLS issues. This is especially true when they have to be loaded from an external source.
He explained it thoroughly in this fashion:
If you’re using an external font file, that file has to be loaded. Then, depending on how your website displays the content, it’s possible that you display the version without the font file first, then the font loads, and this shifts the layout, which causes CLS issues.
John referenced this article on Google’s web.dev site, which explains how to solve font issues that are causing problems with CLS.
This happens at approximately the 6:39 mark in the video.
John Mueller AskGooglebot Transcript
SEO Professional 2 6:39
We have been working on CLS problems for a couple of months now. Most of them are okay now. I think we’re almost up to the finish. But there’s one thing that is popping up, like, from randomly out of nowhere. Is it possible that the font could be a CLS issue?
John 7:06
The font…
SEO Professional 2 7:07
The type of font, because we have some CLS contribution, like 0.01, 0.09, 0.08. And it’s all just in the same paragraph on the font. At least it looks like it’s the font.
John 7:25
It could be, like I, I, I’m not an expert on the CLS side of things, but depending on how you set things up on a page, if you’re using an external font file, then that file has to be loaded. And depending on how you display the content, it might be that you display the version of the content without the font file first, and then it loads the font, and that shifts the layout around. So that could be something that might be happening there. I think someone in the chat also just mentioned it, like the web font side of things. I think, on web.dev, the Chrome folks have an article about using fonts and minimizing the layout shift. So I would check out for that.
SEO Professional 2 8:15
Okay. Is it easy to find? I think so, right?
John 8:22
So no, probably. Hopefully.
SEO Professional 2 8:25
Okay, then I will just check it regarding the font if I cannot manage to fix it, because also the developer did not see any problems with it, like, “Hey, what’s going on in that paragraph?” But, okay, then we check the overlay of the font and learn slowly.
John 8:43
I think, also in Chrome Developer Tools, you can do things like block the URL of the font file, and load the page and kind of compare it a little bit clearer. Really see, is it really from the font? Or is it something else maybe that’s causing the issue?
SEO Professional 2 8:58
Okay, yeah. I’ll check that in depth. Thank you.
