Locally Host Fonts Easily with Typeface npm Package


TAGS: gatsbyfonts

Turns out "self-hosting" web fonts is much faster than using Google or Adobe's CDN.

You can put the font file into your assets folder in a Gatsby project, and that'll work just fine.

I opted to use this npm package called Typefaces by Gatsby's Kyle Mathews. Trusted source and all that.

More importantly, I didn't have to go and track down the font files I wanted to use.

Setup for Gatsby

In your terminal:

yarn add typeface-open-sans typeface-raleway

Then in gatsby-browser.js


All set. Gatsby will even put the CSS in my <head> so it all loads faster.