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.
This guide uses the Gatsby default starter and a font file. Some common font file extensions are
Get started by using local fonts by adding them to your project. Copy the font file in your Gatsby project, for example,
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
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
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.
- Check out the Adding a Local Font Gatsby recipe.