How to Add Custom Fonts to a GatsbyJS Site

Today, I successfully added a custom font to a Gatsby site I'm working on. The process is pretty simple! Here it is in 4 steps:

1) Create a folder src/fonts/ and put your custom font files in it (mine was called Timeless.ttf).

2) Create a global CSS file at src/css/index.css.

3) In the global CSS file you just created, write the following:

@font-face {
  font-family: 'Timeless';
  src: url('../fonts/Timeless.ttf');
}

html {
  font-family: Timeless;
}

4) In your gatsby-browser.js file, import the global CSS file.

import '.src/css/index.css'

And there you go :)