Adding custom fonts in Gatsby + Reactjs

In Gatsby Site , there are various ways you can add custom fonts .However I prefer to bundle the font with the project , so that it won’t change later.This approach works just fine and is probably one of the best solutions if your app or website will need to run within an intranet with no Internet access.

Photo byMurat OnderonUnsplash

Adding Custom fonts to your Gatsby React Sites with just few easy steps.

Step 1 : Download your Font files from the sites like https://fonts.google.com/etc

Step 2: Paste those files in static/fonts folder inside your Gatsby files

Step 3: In the same fonts(static/fonts) folder , create fonts.css file

Step 4: Now add fontFace rules inside css

@font-face {
    font-family: "Honey";
    src: url("Honey.ttf");
  }

Step5: install gatsby-plugin-web-font-loader

with npm

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

or with yarn

yarn add gatsby-plugin-web-font-loader

Step5: Open gatsby-config.js and add font plugin inside the plugins array. Like below

 {
      resolve: "gatsby-plugin-web-font-loader",
      options: {
        custom: {
          families: ["Honey"],
          urls: ["/fonts/fonts.css"],
        },
      },
    },

Now save and build your site .

Adding custom fonts in Gatsby + Reactjs

Tags