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.)
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...
This is all you have to do:
yarn add typeface-merriweather typeface-emilys-candy
(Mine were previously imported via an @import in my SCSS)
or, import in your top-level/layout component(s):
import 'typeface-emilys-candy'; import 'typeface-merriweather';
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!