Ensure text remains visible during webfont load

  • Resolved masouddarvishi1992

    (@masouddarvishi1992)


    3 weeks, 6 days ago

    After configuring the plugin, I see this warning for fonts in the pagespeed.web.dev tool. How can I solve it?

    Ensure text remains visible during webfont load

    Leverage the?font-display?CSS feature to ensure text is user-visible while webfonts are loading.?Learn more about?font-display.

Viewing 1 replies (of 1 total)
  • Plugin Author owaisalam

    (@owaisalam)

    To fix the ‘Ensure text remains visible during webfont load’ warning, use the font-display: swap declaration on the web font. Here’s an example:

    @font-face {
    font-family: Arial;
    font-display: swap;
    }

    In Breeze, enabling CSS Minification will automatically apply font-display: swap to the required fonts. Alternatively, you can use the Preload Webfont option under the Preload tab. This option allows you to specify the local font URL or the URL for a CSS file that loads fonts only. For optimal performance, preload only WOFF format fonts. Avoid preloading the entire website CSS file, as it may slow down your site. There’s no need to add Google Fonts links since they are already preloaded.
    Example:?/wp-content/themes/twentytwentytwo/assets/fonts/my-font.woff

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.