[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"

  • This topic has 9 replies, 3 voices, and was last updated 8 months ago by Tom.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1171192
    Elham Mohseni

    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
    Elham Mohseni

    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
    Elham Mohseni

    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
    Elham Mohseni

    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
    Elham Mohseni

    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.