Archived topic
Ensure text remains visible during webfont load issue
1 reply · Started by Ashin on July 4, 2021
Hello,
I am using Proxima Nova, which is a custom font. I added the font using the following PHP function -
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Proxima Nova';
return $fonts;
} );I then used Simple CSS to show the fonts. The issue is that the font is being shown as "Ensure text remains visible during webfont load" in PageSpeed Insights. How can I remove the warning? And if I do, would it help speed up the site by a little, maybe?
Hi there,
you need to add the font-display: swap; property to your @font-face CSS.
See the example I provide here:
https://generatepress.com/forums/topic/local-font-google-page-speeds/#post-1721817
Without that property most browsers will Block text rendering, so no text using that font is displayed until it has been downloaded. So initial visits ( and Google PSI tests Lad Data ) will show better performance with the swap property. However, once the font has been loaded, generally the browser will cache the font, so next page or subsequent visits will mean the browser doesn't have to load the font :) So its what you would call a perceived performance improvement.
Best thing to do is to try it with and without that property.
