Setup

Using Google Fonts in your Nuxt project

Installation

  1. Install @nuxtjs/google-fonts dependency to your project:
yarn
yarn add -D @nuxtjs/google-fonts
npm
npm install -D @nuxtjs/google-fonts
pnpm
pnpm i -D @nuxtjs/google-fonts
  1. Add it to your modules section in your nuxt.config:
nuxt.config (Nuxt 3)
export default defineNuxtConfig({  modules: ['@nuxtjs/google-fonts']})
nuxt.config (Nuxt 2)
export default {  buildModules: ['@nuxtjs/google-fonts']}

Options

You can customize the module's behavior by using the googleFonts property in nuxt.config:

nuxt.config
export default defineNuxtConfig({  googleFonts: {    // Options  }})

It is also possible to add the options directly in the module declaration:

nuxt.config
export default defineNuxtConfig({  modules: [    ['@nuxtjs/google-fonts', {        families: {          Roboto: true,          Inter: [400, 700],          'Josefin+Sans': true,          Lato: [100, 300],          Raleway: {            wght: [100, 400],            ital: [100]          },          Inter: '200..700',          'Crimson Pro': {            wght: '200..900',            ital: '200..700',          }        }    }],  ],})

See the module options.

Table of Contents