Preloading font doesn't work

Hi there,

the preload is working as i can see the font is the first request in resources list to be made, and completed.
But I don't think Google makes any guarantees that preloading will eliminate the annoying Ensure text remains visible during webfont load diagnostic warning - it just may help reduce the odds of it. The only way to remove it is to add the display=swap attributes... which can of course create CLS. Thank

You could try 'moving' your @font-face CSS into the same hook as the preload link. Just add it inside style tags eg.

<style>
your css here
</style>

This way the first thing on the browser to do list is to cache (preload) the font and write it into the CSS ready for use.

Thank you.

I have tried that but I still get that notification.
I guess I'll add the swap directive...

Yeah if it doesn't cause any CLS when adding the display swap, then great, if it does then i suggest you just ignore that google warning

Thank you.
Now, this page (the home-page) has a CLS of 0 with display swap. I'll check more web pages when they are ready - probably this will be different for different designs/websites. That's unfortunate as I wanted to find a common solution and working procedure for all my websites.

Hi David and Raul
LH don't check if the text change when loading a page, only checks if there is any font-display, no matters what.

Yeah the only way to avoid the warning and have 0 font related CLS is to use a system font.
Otherwise all you can do is choose fonts very similar to system fonts, like Roboto, and get them to load as fast as possible. Then you can use display=swap and be fairly confident Google won't complain too much.

Or have an easier life, and don't use display=swap and ignore that Google warning. It has no real bearing on your sites ranking.

Glad to be of help.

Thank you very much, indeed!
As I intend to have an easier life = repeatable experience myself working on more websites, I'll ignore that warning :D

You're welcome

I think that deleting the two lines from CSS with the eot font solves this problem. I'm applying this to more websites and no more notifications from Google. Anyway, nobody has IE 9 anymore.

Yeah just load the fonts you need - i generally use just .woff and .woff2 for regular fonts.