[Hummingbird Pro] display setting for fonts (i.e. auto, swap, fallback etc.) and pre-loading of fo

Hi, I've nearly got my website tuned PERFECTLY, there is only one very minor issue, that I can't seem to fix, I know it's not super important, but this site IS intended to be a demonstration of my pagespeed optimization skills.

The problem I'm having is that I can't seem to get the four fonts being used to preload with the display=swap attribute, so that they are effectively non-blocking downloads. If I can make that work I think I will achieve a straight 100% pagespeed score :smiley: Thanks. Kind regards. Pete.

  • Prathamesh Palve
    • Staff

    Hello Pete Wall,

    The Hummingbird Performance test initially would detect if there is a need to have the font-face property in the CSS for the site to ensure all the fonts remain visible during the font load.

    If you see the same being listed, you can add the following to the Additional CSS section by navigating to Appearance-> Customize-> Additional CSS. Here is an example of the syntax you can use:

    @font-face {
    font-family: "Open Sans Regular";
    src: url("...");
    font-display: swap;
    }

    All these CSS additions would not be lost after any of the theme or plugin upgrades. You can also read more about the font display timelines here:

    https://css-tricks.com/google-fonts-and-font-display/

    If you are pointing to something else, Kindly let me know about it with a bit more explanation and I would be very happy to help you with it too. I’m looking forward to hearing from you

    Thank you,

    Prathamesh

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.