Gatsby is React-based and provides development teams open-source front-end framework. It is used to create the fastest network used for building websites, documentation, and apps.

Adding Google fonts with Gatsby Site

There are two ways to add Google fonts to a Gatsby project: gatsby-plugin-web-font-loader or Fontsource. 

Method 1: Using gatsby-plugin-web-font-loader

The gatsby-plugin-web-font-loader is the official font plugin published by Gatsby which supports loading fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts.

To use in a Gatsby project: 

1. Install with either npm or yarn
   npm install --save gatsby-plugin-web-font-loader
2. Add plugin to your gatsby-config.js file
   plugins: [
{
resolve: 'gatsby-plugin-web-font-loader',
options: {
google: {
families: ['Droid Sans', 'Droid Serif']
}
}
}
]
   Replace ‘Droid Sans’ and ‘Droid Serif’ with your preferred google fonts. 
3. Then add a selected font to the root CSS site.
   HTML
{
font-family:Droid-Sans, Doris Self
}

Method 2: Using Fontsource

Fontsource is a collection of self-hostable Open Source fonts bundled into individual NPM packages. 

To use in a Gatsby project: 

1. Search for whatever font you want and install it via npm or yarn
   npm install fontsource/ballet
2. Import font package into your gatsby-browser.js file
   import "@fontsource/ballet"
3. Use font in CSS file
   body{
font-family: “Ballet”
}

Blog Credits: Linda Ikechukwu

” Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. “