Open source typefaces or web fonts from different service providers are available nowadays to add them easily in a website. We just need to import the required font files in our website. That's all! However, it causes an extra network request for loading the web fonts from the font service provider like Google Fonts or others.

On the other hand, self-hosted fonts in a web site work faster as it does not need to load fonts from other hosted font services. Save loading time! Nice, isn't it?

In this article I will show how to add self-host web fonts or open source typefaces to a Gatsby powered site by using Typeface packages.

What is typeface packages?

Typeface packages are NPM packages for adding self-host web fonts or open source typefaces in a website where dependencies are managed by NPM (like Gatsby powered site). This is developed by Kyle Mathews (Do you remember him? Yes, he is one of the creators of Gatsby). Each typeface package of an open source typeface contains all the required font files (such as woff2, woff, eot, ttf, svg, etc.) and css to be self-hosted in a web site. The good thing about typeface package is that it already contains all the Google Fonts. Not only that, a small amount of other open source typefaces are also available and many more is being added. Just amazing!

How to use typeface packages in gatsby?

Typeface packages require "webpack" to process css and font files. And Gatsby is already built with "webpack" and setup to work with typefaces, so you don't have to do anything here. You just have to add the typeface package in your Gatsby site which can be done in few steps.

First, locate the typeface package on NPM for the font you wanna add in your web site. For example, "montserrat" Google Font and its package name is typeface-montserrat.

Second, install the typeface package in your gatsby site via NPM or YARN. I have shown the both approaches below.

# Using NPM
$ npm install --save typeface-montserrat

# Using YARN
$ yarn add typeface-montserrat

Third, include the typeface in your site's entry point. In Gatsby, it is gatsby-browser.js file, so add the following code there.

// gatsby-browser.js
require('typeface-montserrat')

Alternatively, you can import the typeface in any component of your site. For example, if you want to import the typeface in the Layout component then add the following code in the layout.js file.

// layout.js
import 'typeface-montserrat'

Finally, re-build the site and see your preferred fonts are now self-hosted in your Gatsby site. Wait, wait, if you previously import any fonts then make sure you have removed them. That's it.

Summary

Typeface packages really make it simpler to add self-host fonts to a Gatsby powered site and fonts load faster as well. By following this article you can add self-host fonts to your Gatsby site.

Happy coding!

References

• Typefaces - GitHub page