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. ...
For further actions, you may consider blocking this person and/or reporting abuse
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
Great, this comment was the one that helped me understand that, I was trying to do it for almost a day... Thanks.
is this global.css where font is referred to?
Your own preference, I like to "componentize" my css files but global should work
I think this plugin has been depreciated.
:point-up: yup, use
typefaces: github.com/kyleamathews/typefacesonly works if your desired font is in that repo, no? ^ also seems to be unmaintained
I had to include
/staticin the path to the CSS file, like this:"/static/fonts/fonts.css".Update: I thought the fonts were supposed to go in
/public/static/fontsdirectory, but that is incorrect. They need to go in/static/fonts. If you don't already have a/staticdirectory in the root of your project, you need to create it first, then put the/fontsdir inside. Then usingurls: ["/fonts/fonts.css"],as the article states will work like a charm.Short & sweet! Btw I think you meant to number the list 1.2.3.4 instead of 1.2.1.2
Nice post!
Ah, good catch! I had to break out of the list to drop a code block. Thanks!
That's a life saving article! Thank you so much, Ian!
Glad it helped!
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"].Can you use this together with Google Fonts?
yes. but you need to change the 'custom' key to 'google'
gatsbyjs.org/packages/gatsby-plugi...
so helpful, many thanks Ian
Worked like a charm, thank you
This is what I'm looking for. Thank you.
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.