DEV Community

Cover image for Speed Tip: Use Typefaces.js in Gatsby to Locally Host Fonts
Daniel Stout
Daniel Stout

Posted on

Speed Tip: Use Typefaces.js in Gatsby to Locally Host Fonts

Since launching my new Gatsby-powered website, I noticed that there was only one thing still slowing down the load times: importing fontfaces via Google Fonts! Even though font files are usually relatively small, these imports cause an extra trip to Google's servers... and as a result, a tiny load-blocking delay occurs. (Especially on slow connections.)

Introducing Typefaces.js

Self-hosting fonts has always been a bit of a mess in the past, so most folks (including myself) resorted to just importing straight from Google Fonts... that's what they suggest, after all!

Thankfully, there's a more elegant JS soution available: the Typefaces.js package from Kyle Mathews. (Yes, one of the creators of Gatsby.) Assuming your site or app's build process uses Webpack with loaders for CSS and fonts, it's ridiculously easy to use. In my case, I wanted to use it in Gatsby...

Using Typefaces.js In Gatsby

This is all you have to do:

1. Locate the Typeface files on NPM for font(s) needed.

In my case, it was: Emily's Candy and Merriweather. Note: All of Google's fonts are available for this on NPM, as Kyle has programatically added them. (Font Squirrel's fonts are in the works too!)

2. Install the above files via yarn:
   yarn add typeface-merriweather typeface-emilys-candy
3. Remove the previous imports of those fonts.

(Mine were previously imported via an @import in my SCSS)

4. Add the following to gatsby-browser.js:
   require('typeface-emilys-candy');
   require('typeface-merriweather');

or, import in your top-level/layout component(s):

   import 'typeface-emilys-candy';
   import 'typeface-merriweather';
5. Do a fresh rebuild, and you're done!

The entire process took me around 2 minutes total time, and I shaved an additional ~500ms off my mobile load times in the process. If you haven't already done this on your Gatsby site, I highly recommend it!

Top comments (7)

Collapse
 
anders profile image
Anders

You can also directly reference the font files Google serves up in your base CSS, WOFF files are basically globally supported at this stage so just copy something like:

@font-face {

    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0d.woff) format('woff');
}

from fonts.googleapis.com/css?family=Op... or equivalent and you can still get the files served from Googles servers without including a wasteful extra CSS file, best of both worlds.

( You need to use Internet Explorer 11 or something older like that to get the WOFF file references, otherwise it will give you WOFF2 files which works in the modern browsers but not in IE 11: caniuse.com/#feat=woff2 )

Collapse
 
efleurine profile image
Emmanuel

thanks - really helpfull

Collapse
 
reidmarkel profile image
Reid Markel

This is amazing, was lucky to stumble across this while searching for a better way to import my fonts. Thanks for sharing Daniel.

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Wow good stuff here! I also have been importing from Google Fonts everywhere for lack of a better way. This looks neat, I'll make a mental note to start using this from now on.

Collapse
 
johnmeredith profile image
John Meredith

If I am using Netlify then would I need to add this package.json? Sorry for the newbie question...

Collapse
 
the_riz profile image
Rich Winter

Well. Sorta.

Just so you know, "package.json" isn't a Netlify specific thing. The file package.json contains the settings for which npm packages you'll need in order to use and build the project your are working on.

By entering npm install __[some-library]__ what you are doing is adding the "some-library" to your project. This line will automatically insert "some-library": "^1.23" into your package.json under "dependencies",as well as download the file(s) that actually make up "some-library"... (those numbers at the end are the version you are using).

Collapse
 
aydarfz profile image
aydarfz

Thanks Daniel!