Gatsby Plugin Google Fonts - v2

===================================== =======LOOKING FOR MAINTAINERS=======

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.