[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
    Posts
  • #1171192
    Envolutions

    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.

    #1171269
    David
    Staff
    Customer Support

    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.

    #1171618
    Envolutions

    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?

    #1171678
    David
    Staff
    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

    #1172243
    Envolutions

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

    #1172841
    Tom
    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 🙂

    #1174175
    Envolutions

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

    #1174532
    Tom
    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?

    #1175016
    Envolutions

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

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