[Resolved] Add font-display: swap

[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

[Tom]

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 🙂

[Kristjan]

Yes, that worked! Thanks a lot.

[Tom]

You’re welcome 🙂

[Carlos]

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

Is there a similar solution?

[Tom]

That same solution should work for you.

[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….

any ideas?

Cheers

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

[Tom]

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.

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

[David]

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

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

[David]

Glad to hear that!

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

[Tom]

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!

[Author]

Posts