DEV Community

Zach Taylor
Zach Taylor

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

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

import '.src/css/index.css'
Enter fullscreen mode Exit fullscreen mode

And there you go :)

Top comments (0)