4 Steps to Self-Hosted Fonts in Gatsby

I finally got around to setting up fonts for my site, but everywhere I looked were articles that overly complicated self-hosting fonts in Gatsby. Here's the easy 4-step process I used for my blog.

1 - place your font files in static/fonts/.
2 - create a fonts.css in the same directory and add your css font face rule(s). Mine looks like this:

        @font-face {
          font-family: "Lato";
          src: url("Lato-Regular.otf");
        }

        @font-face {
          font-family: "Dank Mono";
          src: url("DankMono-Regular.otf");
        }

3 - add gatsby-plugin-web-font-loader with either npm or yarn (don't forget to --save!).
4 - add the plugin to your gatsby-config.js inside the plugins array. Here's mine:

        {
          resolve: "gatsby-plugin-web-font-loader",
          options: {
            custom: {
              families: ["Lato, Dank Mono"],
              urls: ["/fonts/fonts.css"],
            },
          },
        },

That's it!

Comments

[Stephan Griesel 🇿🇦 🇳🇱]

Plugin not even needed. Just add font to your static folder and refer to it in your css file. Keep in mind that when using the static folder you can just refer to it in the subfolder in your static folder, for example my static folder looks like this: static/fonts, then in your css your will just refer to /fonts/yourfont.otf

[zendannyy]

is this global.css where font is referred to?

[Stephan Griesel 🇿🇦 🇳🇱]

Your own preference, I like to "componentize" my css files but global should work

[Allyson Souza]

Great, this comment was the one that helped me understand that, I was trying to do it for almost a day... Thanks.

[Robert Marshall]

I think this plugin has been depreciated.

[alientang]

:point-up: yup, use typefaces: github.com/kyleamathews/typefaces

[Ben Greenberg 🧢]

only works if your desired font is in that repo, no? ^ also seems to be unmaintained

[Kellen Mace]

I had to include /static in the path to the CSS file, like this: "/static/fonts/fonts.css".

[Kellen Mace]

Update: I thought the fonts were supposed to go in /public/static/fonts directory, but that is incorrect. They need to go in /static/fonts. If you don't already have a /static directory in the root of your project, you need to create it first, then put the /fonts dir inside. Then using urls: ["/fonts/fonts.css"], as the article states will work like a charm.

[molamk]

Short & sweet! Btw I think you meant to number the list 1.2.3.4 instead of 1.2.1.2

Nice post!

[Ian Gloude]

Ah, good catch! I had to break out of the list to drop a code block. Thanks!

[Janaka]

Hi thank you very much. but it seems like it's not working with --prefix-paths.

Any ideas on how to fix it. Seems like the prefix path is not taken from urls: ["/fonts/fonts.css"].

[Petr Mrkvicka]

That's a life saving article! Thank you so much, Ian!

[Ian Gloude]

Glad it helped!

[Petra Spirkova]

so helpful, many thanks Ian

[Alex Quasar]

Can you use this together with Google Fonts?

[Reza Majidi]

yes. but you need to change the 'custom' key to 'google'

options: {
    google: {
        families: ['Droid Sans', 'Droid Serif']
    }
}

gatsbyjs.org/packages/gatsby-plugi...

[Yasir Jafar]

People who are using sass in the project.
in the sass file use css file to import and create fonts.css file instead of fonts.sass
and use the same code above, it should work then.

[Husni Adil Makmur]

This is what I'm looking for. Thank you.

[GT Fari]

Worked like a charm, thank you