Site logo

Archived topic

Ensure text remains visible during webfront load - how to remove this?

9 replies · Started by Bob on April 16, 2021

Viewing posts 1–10 of 10

When I run Google PageSpeed Insights on my site (https://www.tawcan.com), I keep getting the "Ensure text remains visible during webfront load" under diagnostics.

The 3 fonts that show up are:
…v18/mem8YaGs1….woff2(fonts.gstatic.com)
…v18/mem5YaGs1….woff2(fonts.gstatic.com)
…v27/KFOmCnqEu….woff2(fonts.gstatic.com)

I'm already using System Stack under Customize -> Topography -> Body so I thought the theme doesn't use any Google fonts. I can't figure out what's requesting these fonts. Could you help? Thank you.

Icon Type was already set to SVG, that's why I can't figure out what's causing these warnings.

Hi there,

its requesting Open Sans and Roboto.

Can't see where the Robot request is being made - but its most probably the Google Ads - as thats a the common font they request.

Opens Sans is requested by the ml-forms elements - are you using Mailer Lite or some other form plugin ? As it would be that making the font request.

Hi,

I'm just using Mailerlite subscription forms that I created on Mailerlite's site. Is there any way to host these fonts locally?

I've tried using the OMGF plugin but that didn't do anything. I'm running out of ideas and so confused. :)

Hi there,

I've checked your site on Google PSI and the exact suggestion on the flagged issue is "Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading."

That said, have you tried adding this PHP snippet?

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

Yes I already have added that PHP snippet a few days ago.

Have also cleared cache after adding plugins.

What does “Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading" mean exactly? Thanks.

What does “Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading” mean exactly? Thanks.

This article explains it well.
https://web.dev/font-display/

Yes I already have added that PHP snippet a few days ago.

Have also cleared cache after adding plugins.

Ah yes, I've rechecked your site and noticed you're not using the default way of using Google fonts for the theme. That snippet isn't applicable.

Normally, the font requests it like this:
<link rel="stylesheet" id="generate-fonts-css" href="//fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic" media="all">

Your site doesn't have one and it preloads the fonts:
https://share.getcloudapp.com/o0u6Pomy

Like David, I've had trouble finding the requests made for fonts.

But I think both the fonts are requested by Mailerlite. I believe it's this one(found on your site).
https://static.mailerlite.com/assets/plugins/groot/modules/includes/groot_fonts/import.css?version=1615383

Which, as David pointed, comes from Mailerlite.

Now I don't think you can add font-display: swap; to this because it's coming directly from ML's server.

Since its directly tied to the plugin you use, I recommend asking Mailerlite if they could provide you a solution for the fonts their plugin requests.

This archived topic is closed to new replies.