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)
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:
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 )
thanks - really helpfull
This is amazing, was lucky to stumble across this while searching for a better way to import my fonts. Thanks for sharing Daniel.
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.
If I am using Netlify then would I need to add this package.json? Sorry for the newbie question...
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).Thanks Daniel!