[Support request] Google Web Core Vitals Help: “Ensure text remains visible during webfont load”

[George]

Hi:
I’m using the stock Generate Press premium theme (no child theme), and am trying to improve my Google Web Core Vital Score, which is pretty bad at the moment: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.bestofbudgets.com%2Fbest-transcription-jobs-to-earn-full-time-income%2F

One of the suggestions by Google was to “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.FCPLCP
URL
Potential Savings
…v20/mem8YaGs1….woff2(fonts.gstatic.com)
0 ms
…v20/mem5YaGs1….woff2(fonts.gstatic.com)
0 ms
…v27/4UaGrENHs….woff2(fonts.gstatic.com)
0 ms

How anyone tell me how to go about addressing this issue? I’ve already added “font-display: swap;” to @font-face{} per the recommendation, but it didn’t help.

Thanks,

[Elvin]

Hi George,

Can you try adding this PHP snippet instead?

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

Here’s how to add PHP – https://docs.generatepress.com/article/adding-php/

[George]

Hi Elvin:
Thanks, I’ve added the above code to functions.php, though still same result in Google. The tool also suggests adding “swap” to the ennd of the font LINK tag:

<link href=”https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&#8221; rel=”stylesheet”>

How can I do this in GP?

Thanks!

[Elvin]

Ah my bad, there’s no need for the PHP then. The font seems to be requested from somewhere else rather then from the customizer settings.

How anyone tell me how to go about addressing this issue? I’ve already added “font-display: swap;” to @font-face{} per the recommendation, but it didn’t help.

I don’t think this would work if the font request is coming from something else. doing another @font-face CSS won’t change the one that precedes it.

I’ve checked around the site and the request seems to be coming from this – https://share.getcloudapp.com/rRuj7eGP – which is from a custom HTML widget in the sidebar.

Fix the URL parameter.

Try this:

https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap

[Author]

Posts