[Resolved] Can't find the @font-faces / "Ensure text remains visible during webfont load"

[Elham]

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.

[David]

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.

[Elham]

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?

[David]

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

[Elham]

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;
} );

[Tom]

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 🙂

[Elham]

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. 🙁

[Tom]

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?

[Elham]

I have deactivated the W3 Total Cache plugin, this seems to have been the solution. Thank you all very much!

[Tom]

No problem 🙂

[Author]

Posts