Posts Learn Components Snippets Categories Tags 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

26 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:[email protected];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:[email protected];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]
    },
  }
}

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

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

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More