Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


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.


With npm:

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

Or with Yarn:

yarn add gatsby-plugin-web-font-loader


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.

© 2023 Gatsby, Inc.