Host Google Fonts Yourself For Performance and Privacy In Your Gridsome Blog

Photo by Kristian Strand on Unsplash

This is part five of a series on building a file-based blog from scratch with Gridsome. Find the full series here.

As of May 2020, at least 88 Million Websites use Google Fonts. Apart from the privacy reasons (why should I let Google know every time someone visits my website?), soon using a CDN other than your own won’t bring you any performance benefits. Shared browser cache is going away.

Until now, when you loaded an external resource, like a Google Font, the browser would serve it from its cache if available. Regardless which site cached it. This means that only the first site that uses these fonts will occur loading time, and any subsequent site using the same fonts will benefit from the browser cache.

On top of this, it might not be allowed to load fonts from Google Fonts in the EU because of privacy laws.

The simple solution to this is: host Google Fonts yourself. They have an open source license and it allows you to host them yourself. You can use the Google Fonts helper.

Let’s set this up with Gridsome!

How to download your fonts

You’ll need the fonts and weights from your Google Fonts URL. That URL looks something like this:

@import url(‘https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap’);

This means that the font we’re looking for is Nunito Sans with the weights 400 and 700.

We also add that fonts CSS directly to our html head, not to our main.css, to speed up the font loading (and keep our perfect Lighthouse score).

1. Go to the Google Fonts helper.
2. Search for the font you use and select it
3. Select the charsets (usually latin)
4. Select the styles you need (regular and 700 in our case)
5. Under “Copy CSS”, select “Best Support”
6. Customize the folder prefix to /fonts/
7. Download the files and copy them into the static/fonts folder in your project (create it if it doesn’t exist)
8. Copy the CSS into a fontsCSS variable in your main.js and add it to your site like this:

import DefaultLayout from ‘~/layouts/Default.vue’
import ‘./css/main.css’

const fontsCss = `
/* nunito-sans-regular - latin-ext_latin */
@font-face {
  font-family: ‘Nunito Sans’;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(‘/fonts/nunito-sans-v5-latin-ext_latin-regular.eot’); /* IE9 Compat Modes */
  src: local(‘Nunito Sans Regular’), local(‘NunitoSans-Regular’),
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-regular.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-regular.woff’) format(‘woff’), /* Modern Browsers */
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-regular.svg#NunitoSans’) format(‘svg’); /* Legacy iOS */
}

/* nunito-sans-700 - latin-ext_latin */
@font-face {
  font-family: ‘Nunito Sans’;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(‘/fonts/nunito-sans-v5-latin-ext_latin-700.eot’); /* IE9 Compat Modes */
  src: local(‘Nunito Sans Bold’), local(‘NunitoSans-Bold’),
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-700.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-700.woff2’) format(‘woff2’), /* Super Modern Browsers */
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-700.woff’) format(‘woff’), /* Modern Browsers */
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-700.ttf’) format(‘truetype’), /* Safari, Android, iOS */
       url(‘/fonts/nunito-sans-v5-latin-ext_latin-700.svg#NunitoSans’) format(‘svg’); /* Legacy iOS */
}
`

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component(‘Layout’, DefaultLayout)
  
  head.style.push({
    type: ‘text/css’,
    cssText: fontsCss,
  })
}

Now your should be ready to go!

Next part: add styling to your code blocks

That’s it for this post on how to integrate Google Fonts directly into your Gridsome site. In the next part of this series, we will add styling to our code blocks with ~PrismJS~Shiki.