Setup

Using Google Fonts in your Nuxt project

Installation

Install @nuxtjs/google-fonts dependency to your project:

yarn

yarn add -D @nuxtjs/google-fonts

Add it to your modules section in your nuxt.config:

nuxt.config (Nuxt 3)

export default defineNuxtConfig({
  modules: ['@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.

Getting StartedOptions