gatsby-plugin-webfonts

A Gatsby plugin to handle cdn, base64 and self hosted webfonts

• Creates minified @font-face CSS rules
• Supports font-display property (Default: 'swap')
• Handles preconnect and preload optimizations
• Automatically downloads fonts for self hosting
• Supports cdn, base64 and self hosted Fonts (Default: 'selfHosted')

Install

// with npm
npm install gatsby-plugin-webfonts

// with yarn
yarn add gatsby-plugin-webfonts

How to use

Edit gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-webfonts`,
      options: {
        fonts: {
          google: [
            {
              family: "Roboto",
              variants: ["300", "400", "500"],
              //subsets: ['latin']
              //text: 'Hello'
              //fontDisplay: 'swap',
              //strategy: 'selfHosted' // 'base64' || 'cdn'
            },
          ],
        },
        //formats: ['woff2', 'woff'],
        //useMinify: true,
        //usePreload: true,
        //usePreconnect: false,
      },
    },
  ],
};

Google Fonts

Using Google's Font API, name the font families you'd like to load.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-webfonts`,
      options: {
        fonts: {
          google: [
            {
              family: "Roboto",
              variants: ["300", "400", "500"],
            },
            {
              family: "Open Sans Condensed",
              variants: ["300", "700"],
            },
          ],
        },
      },
    },
  ],
};

You can also supply the text parameter to perform character subsetting:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-webfonts`,
      options: {
        fonts: {
          google: [
            {
              family: "Roboto",
              variants: ["300", "400", "500"],
              text: "Hello",
            },
          ],
        },
      },
    },
  ],
};

The text subsetting functionality is only available for Google fonts.

License

MIT