Skip to content

pocorschi/gatsby-plugin-google-fonts-v2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Gatsby Plugin Google Fonts - v2
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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published