Options

families

Type: Object Default: {}

nuxt.config.js

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

display

The font-display property lets you control what happens while the font is still loading or otherwise unavailable.

Type: String Default: 'swap'

nuxt.config.js

googleFonts: {
  display: 'swap' // 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
}

Note: manually enabling the preload option will turn off 'swap' by default.

subsets

Some of the fonts in the Google Font Directory support multiple scripts (like Latin, Cyrillic, and Greek for example). In order to specify which subsets should be downloaded the subset parameter should be appended to the URL.

Type: Array[String]|String Default: []

nuxt.config.js

googleFonts: {
  subsets: 'greek'
}

text

Oftentimes, when you want to use a web font on your site or application, you know in advance which letters you'll need. This often occurs when you're using a web font in a logo or heading. See https://developers.google.com/fonts/docs/css2#optimizing_your_font_requests

In these cases, you should consider specifying a text. This allows Google Fonts to return a font file that's optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.

Type: String Default: null

nuxt.config.js

googleFonts: {
  text: 'Hello world'
}

prefetch

This option injects dns-prefetch into the head of your project.

<link rel="dns-prefetch" href="https://fonts.gstatic.com/"/>

Type: Boolean Default: true

nuxt.config.js

googleFonts: {
  prefetch: true
}

preconnect

This option injects preconnect into the head of your project.

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />

Type: Boolean Default: true

nuxt.config.js

googleFonts: {
  preconnect: true
}

preload

This option injects preload into the head of your project.

<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto" />

Type: Boolean Default: false

nuxt.config.js

googleFonts: {
  preload: true
}

useStylesheet

This option injects useStylesheet into the head of your project which is recommended for projects that use the AMP module that removes scripts.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto" />

Type: Boolean Default: false

nuxt.config.js

googleFonts: {
  useStylesheet: false
}