Archived topic
Can't find the @font-faces / "Ensure text remains visible during webfont load"
9 replies · Started by Elham on February 20, 2020
Dear support forum,
In my pursuit of optimizing my website according to the Google Pagespeed Insights, I encountered some fonts which I can't seem to edit or adjust to add the feature: "font-display:swap;".
I have tried the following:
-adding "font-display:swap;" to every @font-face I could find.
-switching Icon Type to SVG in Customizer > General.
-adding the filter suggested by Tom somewhere on this forum
add_filter( 'generate_google_font_display', function() {
return 'swap';
} );
The fonts I'm having problems with:
…v20/KFOmCnqEu….woff2(fonts.gstatic.com)
…v11/FeVQS0NQp….woff2(fonts.gstatic.com)
…v14/1Ptug8zYS….woff2(fonts.gstatic.com)
…v20/KFOlCnqEu….woff2(fonts.gstatic.com)
…fa/fa.woff2?v=4.7.0(......nl)
…eti/et-icons.woff?v=1.0(.......nl)
All fonts are hosted locally to my knowledge.
If anyone could point me to the right direction, that would be awesome.
Hi there,
add the PHP snippet Tom provides here:
https://generatepress.com/forums/topic/add-font-display-swap/#post-993058
This should add swap to the fonts being loaded by fonts.gstatic.com
The last two are icon fonts being loaded by another plugin - so you would need to speak with that author to change that.
Hey David,
Thank for your reply, but I've already tried that snippet by Tom as you can read from my initial post.
Do you have any other suggestions?
That snippet should work.
Can you add the snippet, and clear any caches - then let us know so we can take a look at why it isn't
I have added the snippet and cleared all caches, nothing has changed.
Maybe the other added snippets interfere? These were added previously to locally host all used fonts:
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'generate-fonts' );
} );
add_action( 'admin_init', function() {
add_filter( 'generate_google_fonts_array', '__return_empty_array' );
} );
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Roboto';
$fonts[] = 'Alef';
return $fonts;
} );
In your generate_typography_default_fonts filter, can you add "Custom" to the end of the font names? Then adjust the @font-face calls to use this "Custom" font name.
Let me know :)
I don't quite understand this step. But anyway,
So I've changed the filter to:
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'RobotoCustom';
$fonts[] = 'AlefCustom';
return $fonts;
} );
And then adjusted all fonts in the style.css @font-face calls. Like below:
/* roboto-900italic - latin */
@font-face {
font-display:swap;
font-family: 'RobotoCustom';
font-style: italic;
font-weight: 900;
src: url('/fonts/roboto-v20-latin-900italic.eot'); /* IE9 Compat Modes */
src: local('Roboto Black Italic'), local('Roboto-BlackItalic'),
url('/fonts/roboto-v20-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/roboto-v20-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/roboto-v20-latin-900italic.woff') format('woff'), /* Modern Browsers */
url('/fonts/roboto-v20-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/roboto-v20-latin-900italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
I purged the cache and rechecked, Google Pagespeed Insights still gives me the same results. :(
I'm not actually seeing any calls to the Google Fonts API in your source. Can you deactivate any caching/minifying plugins you currently have activated?
I have deactivated the W3 Total Cache plugin, this seems to have been the solution. Thank you all very much!
No problem :)
