ElianCodes

← Back to blog

Published on 05/07/2021 18:32 by Elian Van Cutsem

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.

Written by Elian Van Cutsem

← Back to blog

Recent Blogposts

  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.