Options

families

Adding Google font families

• Type: Object
• Default: {}

export default {
  googleFonts: {
    families: {
      Roboto: true,
      'Josefin+Sans': true,
      Lato: [100, 300],
      Raleway: {
        wght: [100, 400],
        ital: [100]
      },
      Inter: '200..700',
      'Crimson Pro': {
        wght: '200..900',
        ital: '200..700',
      }
    }
  }
}

display

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

• Type: String
• Default: null

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

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: []

export default {
  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

export default {
  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

export default {
  googleFonts: {
    prefetch: false
  }
}

preconnect

This option injects preconnect into the head of your project.

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

• Type: Boolean
• Default: true

export default {
  googleFonts: {
    preconnect: false
  }
}

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

export default {
  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

export default {
  googleFonts: {
    useStylesheet: true
  }
}