A simple GatsbyJS plugin that loads Google Fonts using the new v2 API. It also supports importing variable size fonts.

🖖🏻 Install

# With NPM
$ npm install gatsby-plugin-google-fonts-v2

# With Yarn
$ yarn add gatsby-plugin-google-fonts-v2

🎉 Add to Gatsby Config

In gatbsy-config.js

plugins: [
  {
    resolve: `gatsby-plugin-google-fonts-v2`,
    options: {
      fonts: [
        {
          family: 'JetBrains Mono',
          weights: ['100', '400']
        },
        {
          family: 'Roboto Mono',
          weights: ['100..400']
        }
      ]
    }
  }
  // other plugins
];

🎨 Options

Plugin options

| Option | Description | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | verbose (optional) | Enables the error reporting in case any malformed options are passed to the font | | legacy (optional) | It uses the v1 api. CAUTION: this will disable variable font and will error out if both are used at the same time. Not fully implemented yet | | display (optional) | Enables font-display option. Details here. Defaults to display=swap |

Font options

| Option | Description | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | family (required) | the font family you would like to use as it appears in Google Fonts - it will be formatted by capitalising the first letter of every word and replacing space with "+" | | strictName (optional) | if used, the font family name will be used as the user typed it. Useful for some fonts that have ALL CAPS names | | variable (optional) | if used, it signals that the font is a variable width font and will revert to using the (min_weight..max_weight) format for the font weight - if not present, the font will be treated as a regular font and will require the regular font weight format | | weights (optional) | if not used, the font will load with the default weight selected |

Weights formats

| Option | Description | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Regular font | ['300']- will load the 300 weight ['300', '900'] - will load the 300 and 900 weights | | Variable font | ['200..500'] - will load the non-italic version with all weights between 200 and 500 ['200..500', [300..400] - will load the non-italic version with all weights between 200 and 500 AND italic version with weights between 300 and 400 ['', '200..500'] - will load just the italic version with all weights between 200 and 500 NB: Will only work with variable: true | | variable (optional) | if used, it signals that the font is a variable width font and will revert to using the (min_weight..max_weight) format for the font weight - if not present, the font will be treated as a regular font and will require the regular font weight format | | weights (optional) | if not used, the font will load with the default weight selected |

Related

GatsbyJS - Website GatsbyJS Gatsby Plugin Google Fonts - v2 - Plugin in GatsbyJS Google Fonts - Website Google Fonts

Have fun. PR's are welcomed.