gatsby-plugin-web-font-loader

A Gatsby plugin to asynchronously load webfonts using Web Font Loader. Can load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts.

Usage no npm install needed!

<script type="module">
  import gatsbyPluginWebFontLoader from 'https://cdn.skypack.dev/gatsby-plugin-web-font-loader';
</script>

README

gatsby-plugin-web-font-loader

A Gatsby plugin to asynchronously load webfonts using Web Font Loader. Can load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts.

Installation

With npm:

npm install --save gatsby-plugin-web-font-loader

Or with Yarn:

yarn add gatsby-plugin-web-font-loader

Usage

In your gatsby-config.js file, load in the plugin along with which web fonts to load. For example, loading Google Fonts could look like this:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Droid Sans', 'Droid Serif']
        }
      }
    }
  ]
}

For a list of all available options, consult the Web Font Loader readme.