- This topic has 10 replies, 3 voices, and was last updated 1 year, 10 months ago by David.
-
AuthorPosts
-
May 9, 2022 at 12:25 am #2213803Raul
I have added
<link rel="preload" href="mywebsite/roboto-v29-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
using a wp_head hook, but I’m still getting the PageSpeed notification.
I thought that preloading fonts makesfont-display: swap;
unnecessary. Or I have done something wrong? I have also tried to preload all font files (eof, ttf, svg etc) but didn’t work. Woff2 is the only one needed for preloading?May 9, 2022 at 2:01 am #2213902DavidStaffCustomer SupportHi 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 annoyingEnsure 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. ThankYou 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.
May 9, 2022 at 2:42 am #2213936RaulThank you.
I have tried that but I still get that notification.
I guess I’ll add the swap directive…May 9, 2022 at 3:11 am #2213960DavidStaffCustomer SupportYeah 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
May 9, 2022 at 4:07 am #2213986RaulThank 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.May 9, 2022 at 4:25 am #2213998LonginosHi David and Raul
LH don’t check if the text change when loading a page, only checks if there is anyfont-display
, no matters what.May 9, 2022 at 4:32 am #2214001DavidStaffCustomer SupportYeah 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.
May 9, 2022 at 5:13 am #2214042RaulThank you very much, indeed!
As I intend to have an easier life = repeatable experience myself working on more websites, I’ll ignore that warning 😀May 9, 2022 at 5:14 am #2214044DavidStaffCustomer SupportYou’re welcome
May 9, 2022 at 6:00 am #2214076RaulI 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.
May 9, 2022 at 6:12 am #2214094DavidStaffCustomer SupportYeah just load the fonts you need – i generally use just
.woff
and.woff2
for regular fonts. -
AuthorPosts
- You must be logged in to reply to this topic.