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
is this global.css where font is referred to?
Your own preference, I like to "componentize" my css files but global should work
Great, this comment was the one that helped me understand that, I was trying to do it for almost a day... Thanks.
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
/static
in the path to the CSS file, like this:"/static/fonts/fonts.css"
.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 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!
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"]
.That's a life saving article! Thank you so much, Ian!
Glad it helped!
so helpful, many thanks Ian
Can you use this together with Google Fonts?
yes. but you need to change the 'custom' key to 'google'
gatsbyjs.org/packages/gatsby-plugi...
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.
This is what I'm looking for. Thank you.
Worked like a charm, thank you