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.


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:

// 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