Using Local Fonts
This guide covers how to add local fonts to your Gatsby site.
- A Gatsby project set up. (Need help creating one? Follow the Quick Start)
- Font file(s), e.g. from Inter. Common font file extensions are
When you downloaded your font file(s), e.g. from Inter you will most likely have a bunch of different files available (this can differ a lot between fonts). You’ll want to use the “Web” versions or Variable Fonts versions of your font. They are optimized for the usage on the web.
Furthermore, in this next step you should only choose the font styles and weights you absolutely must, as it’s benefitial for performance to limit the number of fonts.
Place your font(s) into a
static/fonts directory. For the sake of this guide the
Inter/Inter Web/Inter-roman.var.woff2 file is used. It’s a web optimized, variable, subset font file of Inter.
static folder (see the Using the Static Folder guide) contents will be copied over to the
public folder so you can reference the files in your other files.
For the best performance possible it’s recommended to preload your font files. Create a
gatsby-ssr.js file in the root of the project (if not already there), and add the following:
This section depends on the styling option you chose and the fonts you chose. Refer to the respective documentation for details. In this guide a
global.css file is added to the root, imported into a
gatsby-browser.js file and has the following contents:
The important piece is the
src. Point the
url to your