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

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

Home Forums Support Can't find the @font-faces / "Ensure text remains visible during webfont load"

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #1171192

    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:

    All fonts are hosted locally to my knowledge.
    If anyone could point me to the right direction, that would be awesome.

    Customer Support

    Hi there,

    add the PHP snippet Tom provides here:


    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?

    Customer Support

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

    Lead Developer
    Lead Developer

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

    Lead Developer
    Lead Developer

    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!

    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.