Google Performance report makes webfont suggestion

After running a Google Performance report "Ensure text remains visible during webfont load" is showing up.

Please advise how to add font-display: swag; for Google Fonts and font-display: auto; for the Font Awesome to improve Google Performance report

  • Nithin
    • Support Wizard

    Hi Menno,

    When checking your website via mobile, it seems like the icons are what's taking time to load. When it comes to web fonts that load icons, I'm afraid there isn't an acceptable fallback for such cases. Using font-display: block is recommended when it comes to loading icons, which seems to be the default.

    Using font-display: swap property is only helpful when it comes to loading texts so that users could get the content loaded as fast as possible in the initial page load.

    You might find the following link helpful:
    https://github.com/FortAwesome/Font-Awesome/issues/15085

    For any instances other than an icon, you can use font-display swap, and it should be fine. For example:

    @font-face {
      font-family: "Open Sans Regular";
      font-weight: 400;
      font-style: normal;
      src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
      font-display: swap;
    }

    The above is an example CSS, you could use the same format as an example where the theme loads the CSS.

    Please let us know if you have any further query. Have a nice day ahead.

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.