DEV Community

4 Steps to Self-Hosted Fonts in Gatsby

Ian Gloude on October 17, 2019

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. ...

Read full post

Stephan Griesel 🇿🇦 🇳🇱 • Jul 8 '20 • Edited

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 • Jan 19 '21

is this global.css where font is referred to?

Stephan Griesel 🇿🇦 🇳🇱 • Jan 19 '21 • Edited

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

Allyson Souza • Sep 8 '20

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

Robert Marshall • Feb 25 '20

I think this plugin has been depreciated.

alientang • Apr 21 '20

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

Ben Greenberg 🧢 • Oct 7 '20

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

Kellen Mace • May 23 '20 • Edited

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

Kellen Mace • May 27 '20 • Edited

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 • Oct 18 '19

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 • Oct 18 '19

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

Janaka • Feb 15 '20

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 • Jan 16 '20

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

Ian Gloude • Feb 6 '20

Glad it helped!

Petra Spirkova • Feb 14 '20

so helpful, many thanks Ian

Alex Quasar • Feb 14 '20

Can you use this together with Google Fonts?

Reza Majidi • Apr 2 '20

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 • Dec 17 '21

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 • Jan 3 '21

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

GT Fari • Jul 8 '20

Worked like a charm, thank you