Adding Google Fonts to your NuxtJS site

Some time ago I found out that some of my fonts weren't loading in some browsers. I was using Google Fonts imported in my stylesheet using @import. I couldn't immediately pinpoint the issue, so I searched for an alternative way to add the fonts I needed to my Nuxt site.

@nuxtjs/google-fonts

In my search on Google Fonts in Nuxt, I almost immediatly found out about the Nuxt module called @nuxtjs/google-fonts. It works like a charm and is very versatile. Here's a little guide on how you can use it.

Installing the module

Installing a module in Nuxt is the easiest thing you'll come across. It's nothing more than a simple NPM package install. Here's how you can install the google-fonts module:

yarn add -D @nuxtjs/google-fonts

After the install, we'll add the module to our nuxt.config.js file:

// nuxt.config.js

{
  buildModules: [
    '@nuxtjs/google-fonts'
  ],
}

That should work!

Adding fonts

Adding fonts to your NuxtJS configuration is very easy. You just have to add them in the nuxt.config.js file. There's a lot of configurable parts included with the module, but to keep things easy, I'll only go into the basics here.

Every option or font is added via the googleFonts property in nuxt.config.js

To add a font to your config. Just add the name to the module in nuxt.config.js:

// nuxt.config.js

googleFonts: {
  families: {
    // a simple name
    Roboto: true,

    // a name with spaces
    'Josefin+Sans': true,

    // specific font weights
    Lato: [100, 300],
  }
}

If you need a little more advanced fonts, like italic or bold, there's a specific property:

// nuxt.config.js

googleFonts: {
  families: {
    // basic
    Lato: [100, 300],

    // advanced
    Raleway: {
      // weights
      wght: [100, 400],
      // italic
      ital: [100]
    },
  }
}

Using fonts in CSS

After installing and configuring the module and adding the fonts. The fonts are just usable in your CSS.

Keep in mind that the font you specify in the CSS-file should ofcourse be installed first via the nuxt.config.js file.

p {
  font-family: Rubik, sans-serif;
  font-weight: 400;
}

Using with TailwindCSS

Since I'm using TailwindCSS on my website, I also had to find out how to use the fonts in my custom Tailwind configuration. Turns out I just had to add it by using simple old skool CSS, since there's no way (yet) to add it in an @apply rule.

p.title {
    font-family: Rubik, sans-serif;
    @apply text-lg text-center text-black font-semibold;
}

More info is available on the Official Documentation of the module.