[Resolved] Preloading font doesn’t work

Home Forums Support [Resolved] Preloading font doesn’t work

Home Forums Support Preloading font doesn’t work

  • This topic has 10 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #2213803
    Raul

    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 makes font-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?

    #2213902
    David
    Staff
    Customer Support

    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.

    #2213936
    Raul

    Thank you.

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

    #2213960
    David
    Staff
    Customer Support

    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

    #2213986
    Raul

    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.

    #2213998
    Longinos

    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.

    #2214001
    David
    Staff
    Customer Support

    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.

    #2214042
    Raul

    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 😀

    #2214044
    David
    Staff
    Customer Support
    #2214076
    Raul

    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.

    #2214094
    David
    Staff
    Customer Support

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.