How to add google fonts to a gatsby project with gatsby-plugin-web-font-loader

What is gatsby-plugin-web-font-loader

gatsby-plugin-web-font-loader is 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. In this article, we will explain only for Google Fonts.

Installation

With npm:

Or with Yarn:

Usage

In your gatsby-config.js file, load in the plugin along with which web fonts to load. For example:

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

If you would like to explicitly request the variation you want:

google: {
  families: ["Open Sans Condensed:300,700"]
}

Additional Information

• Gatsby docs
• gatsby-plugin-web-font-loader docs
• Web font loader docs

Thanks for reading! 😁