Fonts for Faster Speed

Hi,

Any way to get rid of pagespeed issues due to fonts? I keep getting – Eliminate render-blocking resources and Google fonts are one of the issues it mentioned.

You can get the code provided on this article - https://css-tricks.com/the-fastest-google-fonts/ - and place it on a Hook element hooked to wp_head.

The code:

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

Alternatively, you can download the font from Google and upload it to your site to locally host it.
Here's how: https://docs.generatepress.com/article/adding-local-fonts/

You then make sure to add font-display: swap; to the @font-face{...} you'll be adding to your site.

You then preload the locally hosted font by hooking a preload code to the wp_head using the Hook Element.

Sample preload code:

<link rel="preload" href="/wp-content/themes/studentmunch/fonts/quicksand.woff2" as="font" crossorigin>

Change the href value to the url path of your uploaded font file.

Here's an in-depth article about this: https://ashton.codes/preload-google-fonts-using-resource-hints/

Thanks. I am using WP rocket and it has a font pre-load option. Should I use that?

If I use it, should I still put this ->

<link rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />

<link rel="preload"
as="style"
href="$CSS&display=swap" />

<link rel="stylesheet"
href="$CSS&display=swap"
media="print" onload="this.media='all'" />

Getting this warning, is this fine?

Done that. Still the same warning .. you can check the below URL in google page speed yourself -

As you can see That warning regarding fonts still remain.

Thanks. I am using WP rocket and it has a font pre-load option. Should I use that?

I'm not exactly sure how well it works. You can try and check if its effective. But you don't necessarily have to use it.

As I've mentioned on the previous reply, you can use the Hook Element to place this code:

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

Where $CSS is the URL for the font you use on your site.

And set the hook to wp_head with display rule location set to "Entire Site".

The alternative to this is adding local fonts which I've also mentioned on the previous reply.

I am sorry, I did not reliaze $CSS has to be replaced by font URL.

Pagespeed gives this link - https://fonts.googleapis.com/css?family=Work%20Sans%3A100%2C200%2C300%2Cregular%2C500%2C600%2C700%2C800%2C900%7CSatisfy%3Aregular&display=swap

Is this the URL I should be entering - full?

Is this the URL I should be entering – full?

You can check your page source for the right URL. To find this on your page source, you use disable caching plugins first as they may be combining/merging things that'll prevent you from seeing the proper URL you need.

Another alternative to try and address this is, to make sure your caching plugin doesn't combine/merge/aggregate CSS. Or atleast make sure the CSS for fonts is excluded.

Note: Optimization plugins are not under the theme's control. You should refer to the documentation of the optimization plugin you're using to do these things.

Or you can try hosting the font locally as mentioned on one of my previous replies.

Hosting the fonts locally is known to address "eliminate render blocking resources" flags too.