How to add Google Fonts for Nuxt JS Project

Learn how to add Google Fonts for your Nuxt JS project the easy way

Created on Sep 02, 2021

•

7964 views

To add Google Fonts for your Nuxt JS project, you can specify the fonts to use from within the Nuxt configuration and reference the font's in your CSS file.

Method 1: Manually Add Google Fonts to Nuxt JS

Let's say you want a font called "Roboto", to add this font you can select the font styles from the Google Font website and copy the link. For example below is the Roboto font with a weight of 300, 400, 500, and, 700.

https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap

Now that you have the URL of the fonts, you can define your configuration on the nuxt.config.js

{
    head: {
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
          {
            rel: 'stylesheet',
            href: 'httpshttps://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap&display=swap'
          }
    ],
}

Once you have defined the font reference, now you can apply it to your web page as follows.

<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>

Method 2: Using nuxt/google-fonts Package

The send method is to use the nuxt/google-fonts package provided by the community. The package providers the following by default:

Specify fonts by name/variant
Parse head links to Google Fonts
Creates only an external link to Google Fonts
Support CSS API v2
Add dns-prefetch
Add preconnect
Add preload
Download css/fonts to local project (No need external resources)

To set it up you just have to add the dependency with either Yarn or NPM.

yarn add --dev @nuxtjs/google-fonts
npm install --save-dev @nuxtjs/google-fonts

Then finally update nuxt.config.js file for the buildModules.

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

Now to use the fonts of your choice you can define it under the "families" key and it supports the font-weight as an array value,

googleFonts: {
  families: {
    Roboto: true,
    'Josefin+Sans': true,
    Lato: [100, 300],
    Raleway: {
      wght: [100, 400],
      ital: [100]
    },
  }
}

Nuxt Js Snippets

new

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Patreon