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. ...
Collapse
 
stevegriesel profile image
Stephan Griesel πŸ‡ΏπŸ‡¦ πŸ‡³πŸ‡± • 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

Collapse
 
zendannyy profile image
zendannyy

is this global.css where font is referred to?

Collapse
 
stevegriesel profile image
Stephan Griesel πŸ‡ΏπŸ‡¦ πŸ‡³πŸ‡± • Edited

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

Collapse
 
allysonsouza profile image
Allyson Souza

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

Collapse
 
robmarshall profile image
Robert Marshall

I think this plugin has been depreciated.

Collapse
 
alientang profile image
alientang

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

Collapse
 
bsgreenb profile image
Ben Greenberg 🧒

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

Collapse
 
kellenmace profile image
Kellen Mace • Edited

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

Collapse
 
kellenmace profile image
Kellen Mace • 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.

Collapse
 
molamk profile image
molamk

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

Nice post!

Collapse
 
iangloude profile image
Ian Gloude

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

Collapse
 
janakact profile image
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"].

Collapse
 
petrmrkvicka profile image
Petr Mrkvicka

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

Collapse
 
iangloude profile image
Ian Gloude

Glad it helped!

Collapse
 
petrasp profile image
Petra Spirkova

so helpful, many thanks Ian

Collapse
 
aquasar profile image
Alex Quasar

Can you use this together with Google Fonts?

Collapse
 
reza profile image
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...

Collapse
 
yasir991925 profile image
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.

Collapse
 
husniadil profile image
Husni Adil Makmur

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

Collapse
 
txndai profile image
GT Fari

Worked like a charm, thank you