[Resolved] Ensure text remains visible during webfont (wp-show-posts.ttf)

Thank you @Elvin,

How can I add what David Suggested to the WP_Head Hook?

Thank You!
-Charbel

Hello @Elvin

Please note that I have followed exactly what David noted in the article you shared, but Google is still complaining about this font:

Here is the wp_head Hook that I created under Elements.

<link rel="preload" href="http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com/wp-content/plugins/wp-show-posts-pro/fonts/wp-show-posts.ttf?ka575c" as="font" crossorigin="anonymous">

Your help is highly appreciated!

Thank You!
-Charbel

Hello @Elvin

I followed exactly what you noted above and removed ?ka575c, now Google is showing this Warning:

Ensure text remains visible during webfont load
Warnings: Lighthouse was unable to automatically check the <code>font-display</code> value for the origin http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com.

Please advise?

Thank You!

Hello @Elvin,

Thank you for your support.
My question here is, if we followed the approach you mentioned above, what will happen on the next plugin update it will overwrite our changes, right?
So, it’s difficult to keep changing.

What about the next option that you suggested?
Could you please give more details on how to do this?

You can try applying your font awesome font-family name SVG url on this CSS:

.wpsp-twitter:before {
    font-family: 'your font family here';
    content: url(your_twitter_svg_file_here.svg);
}

.wpsp-facebook:before {
    font-family: 'your font family here';
    content: url(your_facebook_svg_file_here.svg);
}

Thank You!

Thank you @Elvin!

By adding font-display: swap; to the @font-face{...} on your WP Show Posts Pro’s wp-show-posts.css and wp-show-posts.min.css files solved the issue with Google PSI.

Looking forward for the upcoming big change for WP Show Posts so I don’t have to worry about this with every update.

Many Thanks @Elvin!

Thank You @Elvin, much appreciated!