Using Local Fonts

If you have custom fonts hosted on your computer, Gatsby supports their use in your project. This guide covers how to add local fonts to your Gatsby site.

Prerequisites

This guide uses the Gatsby default starter and a font file. Some common font file extensions are .woff2, .ttf, and otf.

Using local fonts in Gatsby

Get started by using local fonts by adding them to your project. Copy the font file in your Gatsby project, for example, src/fonts/fontname.woff2.

NOTE: It’s recommended to limit custom font usage to only the essential needed for performance.

The Gatsby default starter project adds browser safe font styling in the layout.css file.

You will need to create a new CSS rule to use your local font in your project. First, create a typography.css file and declare your @font-face selector.

Next, import the typography.css file into layout.css. Add the font-family value in the appropriate CSS rules to adjust the styling.

NOTE: If fonts are not updating by following the above, add the font-family value in your CSS file as needed.

Other resources

• Check out the Adding a Local Font Gatsby recipe.