@nuxtjs/google-fonts

Google Fonts module for NuxtJS

• 📖 Release Notes
• 📖  Documentation

Features

• 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)
• Encode fonts to base64

📖  Read more

Setup

1. Add @nuxtjs/google-fonts dependency to your project

yarn add --dev @nuxtjs/google-fonts # or npm install --save-dev @nuxtjs/google-fonts

2. Add @nuxtjs/google-fonts to the buildModules section of nuxt.config.js

{
  buildModules: [
    // Simple usage
    '@nuxtjs/google-fonts',

    // With options
    ['@nuxtjs/google-fonts', { /* module options */ }]
  ]
}

:warning: If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

Using top level options

export default {
  buildModules: [
    '@nuxtjs/google-fonts'
  ],
  googleFonts: {
    /* module options */
  }
}

Options

See module options.

families

• Type: Object
• Default: {}

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

See https://developers.google.com/fonts/docs/css2#quickstart_guides

display

• Type: String
• Default: null

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

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

See https://developers.google.com/fonts/docs/css2#use_font-display

subsets

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

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.

See https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets

prefetch

• Type: Boolean
• Default: true

This option inject <link rel =" dns-prefetch "href =" https://fonts.gstatic.com/ "/> into your project header.

See https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch

preconnect

• Type: Boolean
• Default: true

This option inject <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /> into your project header.

See https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch#Best_practices

preload

• Type: Boolean
• Default: true

This option inject <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto" /> into your project header, optionally increase loading priority.

See https://developer.mozilla.org/pt-BR/docs/Web/HTML/Preloading_content

useStylesheet

• Type: Boolean
• Default: false

This option inject <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto" /> into your project header, recommended for projects that use the AMP module that removes scripts.

download

See downloading Google Fonts

• Type: Boolean
• Default: false

This option you can download css and google sources for your local project. This means that your project will not depend on these external resources.

Note: The options below are only used when this option is enabled.

base64

• Type: Boolean
• Default: false

This option encode the fonts and inject directly into the generated css file.

inject

• Type: Boolean
• Default: true

This option inject the globally generated css file.

See https://nuxtjs.org/api/configuration-css/

overwriting

• Type: Boolean
• Default: false

This option prevents files from being downloaded more than once.

outputDir

• Type: String
• Default: this.options.dir.assets

Specifies the output directory for downloaded files.

stylePath

• Type: String
• Default: 'css/fonts.css'

Specifies the path of the css file to be generated.

fontsDir

• Type: String
• Default: 'fonts'

Specifies the directory where the fonts will be downloaded.

Note: This option is used if the base64 option is disabled.

fontsPath

• Type: String
• Default: '~assets/fonts'

Specifies the path of the fonts within the generated css file.

Note: This option is used if the base64 option is disabled.

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License

Copyright (c) Nuxt Community