Issue with resolving the suggestion in Hummingbird about font visibility

I am trying to resolve " Ensure text remains visible during webfont load " but it seems like it's not working. I have placed all the CSS in the child theme's style.css. Please help.

We tried with CSS code like below as well but seems like that too didn't work.

@font-face {
font-family: "my-google-font";
src: url("https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh7USSwiPGQ.woff2") format("woff2");
font-display: swap;
}

  • Dimitris
    • Support Star

    Hello there damon mellor,
    hope you're doing well today! :slight_smile:

    There're a couple of issues with this workaround:

    1. Unfortunately, it's not possible to change the @font-face rule for web fonts hosted with external services such as Google Fonts. In order to do so, you should download the fonts, upload them into your installation and serve these from there.

    2. After a font is added like above, then you should have separate names for each one of them, as now I can see that you use the same "myWebFont" font family.

    This could lead to conflicts as unique names should be used for each font-family that represents another font, cause you will have to also assign these in different elements, for example:

    h1 {
      font-family: "myWebFont";
    }

    If you're already having CSS rules for all elements, then just use the same names as in Google Fonts.
    Reference: https://css-tricks.com/snippets/css/using-font-face/

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.