[Resolved] Fix the Google page speed “ Endure text remains visible during webfont load”

Home Forums Support [Resolved] Fix the Google page speed “ Endure text remains visible during webfont load”

Home Forums Support Fix the Google page speed “ Endure text remains visible during webfont load”

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1331208
    Howard

    With the new font-display attribute, you can control the length of each of these periods, and what happens when one of them fails. There are 4 different values: block, swap, fallback and optional. There’s also auto, which usually ends up being the same as block. These values are supported on all modern browsers (IE not included), but double check the compatibility table for the latest!
    The font display is controlled per font-face:

    @font-face {
    font-family: ‘my-font’;
    font-display: optional;
    src: url(my-font.woff2) format(‘woff2’);
    }
    Does this go into simple css or add on css?
    Thanks

    #1331844
    Leo
    Staff
    Customer Support

    Hi there,

    Either option should work 🙂

    #1331987
    Howard

    I will give it a try!
    Thanks

    #1332580
    Howard

    Hi Leo: from google page speed article they wrote this below; is this any different from what you agreed upon from your previous answer on my question below from yesterday??

    @font-face {
    font-family: ‘Pacifico’;
    font-style: normal;
    font-weight: 400;
    src: local(‘Pacifico Regular’), local(‘Pacifico-Regular’), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format(‘woff2’);
    font-display: swap;
    }

    #1332639
    David
    Staff
    Customer Support

    Hi there,

    that CSS uses: font-display: swap; which is more specific then your other CSS and is what Google generally prefers. I would use this latest one.

    #1332856
    Howard

    Hi David;
    Thanks for your information!

    Could you please take that code and write it for me as I should actually put it in the css;
    ( there seems to be a url in there, not sure what if anything should be removed…??)
    Thanks
    Howard

    #1332969
    David
    Staff
    Customer Support

    This document explains how to add a Local Font:

    https://docs.generatepress.com/article/adding-local-fonts/

    Which that CSS you’re trying is applicable to.
    It doesn’t apply to a font served up by Google, which is what happens with the fonts you see in the customizer.

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