Font-display: swap to fix the “Ensure text remains visible…” issues

  • Hi all!

    I am looking to solve the “Ensure text remains visible during webfont load” PageSpeed issue. I am aware that font-display:swap does the job, but there was never a @font-face rule in my theme code, so I′m trying to add it now.

    I don′t think any fonts were ever uploaded to the website, so I′m not sure where to start here.

    I tried going through the suggestions PageSpeed audit provided me with to eliminate those fonts, so I came up with this query (for one of the fonts):

    @font-face {
	font-family: 'Poppins';
	src: url 
        (https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2
        ) format('woff2');
	font-display: swap;
}

    However, it didn′t remove this specific font from the issue pane. Do I have to specifiy font-style and font-weight? In that case, how can I know what are those exactly – I′m using a bunch of font weights on my pages.

    Besides, there are also some Roboto fonts that I′m not using at all – is there a way to rather eliminate them completely?

    I would be really thankful for some direction here – I′m familiar with a few webdev basics, but am still a very rookie level.

    • This topic was modified 2 years, 3 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    You’re loading webfonts by referencing CSS stylesheets at googleapis. Those already have @font-face directives so you shouldn’t need to do so again in your own theme’s CSS. However, the CSS from googleapis does not have font-display: swap; by default. You need to append &display=swap to the CSS URL’s query string.

    You could also request a preload of the .woff2 resource with a <link rel="preload" as="font" href=... tag. You still need the googleapis CSS, or the equivalent in your own CSS file.

    See https://web.dev/font-display/ for more on this.

    If you never use Roboto, any related references in the page’s HTML should be removed. Doing any of this can be complicated by what’s possible in whatever plugin you might use to load webfonts, but if you have a custom theme, don’t use such a plugin, directly code what you need into your theme.

    Note that the invisible text issue really only applies to above the fold content. I don’t think the page speed tool is too discriminating in deciding when to display that recommendation. If you’ve taken proper measures, I wouldn’t worry too much if it’s still flagged by the tool.

Viewing 1 replies (of 1 total)
  • The topic ‘Font-display: swap to fix the “Ensure text remains visible…” issues’ is closed to new replies.