How I decrease render-blocking resources with local fonts in Nuxt

I show you why and how to self-host your fonts

Introduction

Ever wondered how to fix the 'Eliminate render-blocking resources' warning in Lighthouse for the fonts you're loading? In this blog I'll describe why you're getting this warning and how we can solve this with local fonts. With the extra benefit of your text not jumping around anymore.

You can reference my Github repo with an example of running Nuxt with local fonts.

Why host fonts local?

Chrome based browsers are moving to cache partitioning for better privacy and Safari was already doing this. In this post the Google devs describe that:

Those that serve large volumes of highly cacheable resources across many sites (such as fonts and popular scripts) may see an increase in their traffic. Also, those who consume such services may have an increased reliance on them.

This blog concludes that the result of these changes are that:

Google Fonts resources will be redownloaded for every website, regardless it being cached on the CDN. Self-host your fonts for better performance. The old performance argument is not valid anymore.

So let's self-host our fonts.

Getting local fonts

Go to google-webfonts-helper.
In the top left corner search field select the font you wish to download. I picked 'Inter' for this example.
In the first field, select what charsets you need. I picked the default 'latin'.
In the second field select your font weights.
In the third field you need to decide whether you want to only support modern browsers or you want to go for the best support, supporting older browsers.
After selecting your support you can select the folder we're going to use. Change ../fonts/ to ./fonts/.

Now you can copy the css. Here's mine. Create a assets/fonts.css file. Paste the css in this file.

assets/fonts.css

/* inter-300 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: local(''), url('./fonts/inter-v2-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
      url('./fonts/inter-v2-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('./fonts/inter-v2-latin-regular.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url('./fonts/inter-v2-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-500 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: local(''), url('./fonts/inter-v2-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
      url('./fonts/inter-v2-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-600 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: local(''), url('./fonts/inter-v2-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
      url('./fonts/inter-v2-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Let Nuxt know we're using this font. Go to your nuxt.config.js. In the css option add '~/assets/fonts.css' so now you have something similar to css: ['~/assets/fonts.css'], in your config.
Now go back to the webfonts-helper and download the files. Create a folder named fonts in your assets. Paste all the fonts inside this folder.

Now you can reference this font in your main css file.

css

html {
  font-family: 'Inter';
  weight: 500;
}

Conclusion

I hope you were able to follow the steps and made your app just a little faster and enjoyable. I appreciate if you would follow me on Twitter or join my newsletter for more Nuxt tips.