[Resolved] Add font-display: swap

Home Forums Support [Resolved] Add font-display: swap

Home Forums Support Add font-display: swap

  • This topic has 14 replies, 4 voices, and was last updated 4 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #992771
    Kristjan

    Hello,

    I am loading Google Fonts via the GeneratePress theme and would like to add font-display: swap.

    The code currently looks like this:

    <link rel=’stylesheet’ id=’generate-fonts-css’ href=’//fonts.googleapis.com/css?family=Lato:regular,italic,700′ type=’text/css’ media=’all’ />

    Adding &display=swap into the href should be enough to enable font-display swap, as shown in the default code from Google Fonts:

    <link href=”https://fonts.googleapis.com/css?family=Lato:400,400i,700&display=swap&#8221; rel=”stylesheet”>

    How can I add &display=swap to the GeneratePress font code?

    Thanks,
    Kristjan

    #993058
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

    add_filter( 'generate_google_font_display', function() {
        return 'swap';
    } );

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Let me know 🙂

    #993073
    Kristjan

    Yes, that worked! Thanks a lot.

    #993074
    Tom
    Lead Developer
    Lead Developer
    #995574
    Carlos

    I have a similar problem for ‘Open Sans’ fonts.

    Pagespeed

    Is there a similar solution?

    #995667
    Tom
    Lead Developer
    Lead Developer

    That same solution should work for you.

    #996077
    Carlos

    I add:

    add_filter( ‘generate_get_all_google_fonts’, function() {
    return ‘swap’;
    });

    Clean: WP Rocket and Cloudflare cache

    This should have added the option to both ‘Open Sans’ and ‘Roboto’ but….

    Roboto

    any ideas?

    Cheers

    #996151
    Kristjan

    One thing I also did that worked.

    Add this to the Code Snippets plugin:

    add_action( 'wp_enqueue_scripts','tu_remove_google_fonts', 10 );
    function tu_remove_google_fonts() {
        wp_dequeue_style( 'generate-fonts' );
    }

    Then add this to Appearance -> Elements -> Add Hook -> wp_head -> Entire Site + All Users:

    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700&display=swap" rel="stylesheet">

    Replace with your own choice of Google Fonts straight from the Google Fonts website.

    #996553
    Tom
    Lead Developer
    Lead Developer

    Carlos – make sure you’re using the function here: https://generatepress.com/forums/topic/add-font-display-swap/#post-993058

    The one you’re using isn’t the correct filter.

    Kristjan – that will work as well, but the filter I shared above will make sure your Customizer options continue to work if you change the font family.

    #1579653
    Nathan

    Hi Tom,

    Reviving this thread to ask:

    Is it possible to add the suggestions below to our child functions.php for Google Fonts?

    In summary: a combination of asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains makes for an experience several seconds faster than the baseline.

    Number 4 below has already been addressed in this thread.

    <!--
      - 1. Preemptively warm up the fonts’ origin.
      -
      - 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
      -    most modern browsers.
      -
      - 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
      -    only after it’s arrived. Works in all browsers with JavaScript enabled.
      -
      - 4. In the unlikely event that a visitor has intentionally disabled
      -    JavaScript, fall back to the original method. The good news is that,
      -    although this is a render-blocking request, it can still make use of the
      -    preconnect which makes it marginally faster than the default.
      -->
    
    <!-- [1] -->
    <link rel="preconnect"
          href="https://fonts.gstatic.com"
          crossorigin />
    
    <!-- [2] -->
    <link rel="preload"
          as="style"
          href="$CSS&display=swap" />
    
    <!-- [3] -->
    <link rel="stylesheet"
          href="$CSS&display=swap"
          media="print" onload="this.media='all'" />
    
    <!-- [4] -->
    <noscript>
      <link rel="stylesheet"
            href="$CSS&display=swap" />
    </noscript>

    https://csswizardry.com/2020/05/the-fastest-google-fonts/

    #1579860
    David
    Staff
    Customer Support

    Hi there,

    those links need to be hooked into the wp_head

    You can do something like this:

    add_action('wp_head' , function() {
        ?>
         <!-- add yours scripts here -->
        <?php
    }); 

    Or you can use a Hook Element to do the same thing

    #1580444
    Nathan

    Hi David,

    Thanks for the reply!

    It looks like this is working now (with my specific fonts loading):

    // Remove GeneratePress Google Fonts
    add_action( 'wp_enqueue_scripts','tu_remove_google_fonts', 10 );
    function tu_remove_google_fonts() {
        wp_dequeue_style( 'generate-fonts' );
    }
    
    // Fast Google Fonts loading
    add_action( 'wp_head', 'add_google_fonts_preload', 1 );
    function add_google_fonts_preload() {
      ?>
      <link rel="preconnect"
      	href="https://fonts.gstatic.com"
      	crossorigin />
      <link rel="preload"
      	as="style"
      	href="//fonts.googleapis.com/css?family=Lato%3Aregular%2C700&display=swap" />
      <link rel="stylesheet"
      	href="//fonts.googleapis.com/css?family=Lato%3Aregular%2C700&display=swap"
      	media="print"
      	onload="this.media='all'" />
      <link rel="stylesheet"
        href="//fonts.googleapis.com/css?family=Lato%3Aregular%2C700&display=swap" />
      <?php
    }
    #1580734
    David
    Staff
    Customer Support
    #1702113
    Sam

    Hi Guys, I am curious. I have this implemented and I can see the swap option is implemented. However, Google PSI still complains about this.

    From my page source: href=’//fonts.googleapis.com/css?family=Poppins:300,regular,500,600,700&display=swap’

    From GPSI: Ensure text remains visible during webfont load
    Warnings: Lighthouse was unable to automatically check the font-display value for the origin https://XXXXXXXXXXXXXXXXXX.com.

    I am wondering if it is just a technical limitation of GPSI or if I am missing something?

    #1703033
    Tom
    Lead Developer
    Lead Developer

    Hi Sam,

    Perhaps it’s a different font they’re seeing? Feel free to open a new support topic with the URL to your site and we can take a look.

    Thanks!

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