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 :)