CLS Issues Due To Fonts

One of my Webflow sites in particular has been tricky to fix when it comes to CLS, but I think I may have found what the issue is…

I believe the FOCU flash to be enough to upset Google and to harm my CLS rating.

My site only has one custom font, Playfair Display, that I have uploaded directly to Webflow.

If I change the display from ‘Swap’ to ‘Optional’ of course it then loads the fallback but the issue goes away.

The same with paragraphs, if I upload Lato rather than using Webflow’s in-built Lato font and set to ‘Optional’, all my CLS issues are fixed.

Of course the problem with using ‘Display: Optional’ is just that, the font I guess is optionally loaded.

Reading online, using ‘Display: Optional’ should also be used alongside pre-loading fonts, but I am unsure how to do this.

Does anyone have any info they could add?

I have searched the forum, but the ‘code fix’ that was circulating doesn’t seem to work any more.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Anyone?

I highly recommend you check your Core Web Vitals in Search Console to see if you have any issues.

I have been able to fix most apart from this CLS issue and I am certain it’s to do with fonts not loading fast enough.

I have already loaded the font manually into Webflow (it’s just the one, Playfair Display), and yet I believe it is not loading fast enough and therefore giving me this error.

Great pictures of trains and I have driven past settle then up to Carlie and taken the train to settle.

Why are you using .otf format?
Swap it to woff2

1 Like

Hi @iDATUS

Thanks! They are quite the machines!

Yes, I am using otf - If I swap for woff2, is that going to mess all my classes up?

Will it automatically switch to this new woff2 font or will I have to go through and manually change each font?

I’ll do it of course! Just want to make sure I have the time to do so if that’s the case.

No guarantees but when I moved from google to webflow it just worked.
I suspect it will just work as well.
I only suggest it as woff2 is supported by all browsers and its much easier to support if people use an established standard so things can be eliminated.
I don’t see a loading time issue and I have never had issues with CLS to do with fonts and if there was even a slightest issue it be all over this forum.

1 Like

Thanks @iDATUS

The reason why I think it’s to with fonts is due to the below trace in Chrome:

Here you can see it says there is a CLS issue, which Lighthouse also ackhowledges:

Screenshot 2021-03-02 at 11.51.07

Then when viewing the load trace, you can see the jump in fonts here:

Screenshot 2021-03-02 at 11.51.13

Screenshot 2021-03-02 at 11.51.17

I was not denying your diagnosis and great info, just saying I have not ever witnessed any cls issue with fonts.
So to see if its an old format issue with modern browsers change it to woff2 which I am told is better, faster, leaner which may be true or not but its what people are using.
Once you have done that and issue is still happening I might look a bit more.

1 Like

Oh I see, thank you for clarifying!

I will change the font format and see what the outcome is.

Ok so I changed the fonts on one page, but still getting CLS issues:

If not the font then maybe Webflow is delaying loading this div with text for some reason?

make sure you delete the .otf now you don’t need it.
So the box you show with Belmond Venice is the box you think is the issue.
So try setting the box to overflow hidden or a fixed width.
Still all very strange.

I spoke too soon…

I also wasn’t getting unstyled fonts flash before:

Very much stuck now, I’ve been trying to fix this since Core Web Vitals was announced, completely out of ideas now.

Ok you got my interest so lets see if we can resolve.
I was unfamiliar with the page as its not your main one and thought it was a box.
I now have ran the test, same as the main you have a 0.01 cls for those reading, 0.1 and above is bad. but even 0.01 is not good. Mine is 0.001 for example.

I will get the font and try myself on a new page with other stuff to see what happens.
I do it now and report back.

1 Like

Thanks so much @iDATUS!

I’ll continue to poke and prod my side as well - I have the fonts set to ‘swap’, so once again it’s got me thinking the CLS is due to fonts loading late.

Thanks again!

I hated that, change it to block. It waits 3 seconds and if it doesn’t load by then it goes to swap.
Try that.
Also, which one did you choose Playfair Display or Playfair Display SC
the 1st one is a variable font which I think may be your issue!

I’ll give it a go!

I chose ‘Playfair Display’!

Unfortunately the ‘SC’ version is caps only, shall i just bite the bullet and stop using Playfair altogether?

Lets pursue the issue and then if you have to choose 0.01 or a new font then at least you know why.

Sounds good.

Ok so I changed to ‘Block’ but there is still movement as the font loads - Interestingly Playfair loads last:

Screenshot 2021-03-02 at 13.05.02

Screenshot 2021-03-02 at 13.05.13

I’ll try using a different font next…

https://design.google/library/variable-fonts-are-here-to-stay/
Interesting read, the font if you like is similar to SVG.
I don’t think you have the correct controls available to you via the editor.
If you use an embed and correct settings I think you will achieve your results.
But as I think you are realising, trying a normal font for now is quicker to prove the issue.

I changed the font to ‘Merriweather’ - Same issues:

Screenshot 2021-03-02 at 13.20.12

ok pm me your read only link so I can check the page out a bit more.

1 Like