Posts Learn Components Snippets Categories Tags Tools About
/

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]
    },
  }
}

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

Load comments for How to add Google Fonts for Nuxt JS Project

)