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
Place the font files into your project
When you downloaded your font file(s), e.g. from Inter you fill 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.
Preload your fonts
For the best performance possible it’s recommended to preload your font files. Add a
gatsby-ssr.js if not existent yet and add the following:
Use the fonts in your CSS
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