Self-host Google Fonts in your next React project with Fontsource

The situation 🤔

While you can rely on Google's CDN to host and serve your fonts so you don't have to, you're relying on that connection and the fonts themselves being available. That's fine for a quick mock-up, but not so great for your production roll-out.

Typefaces—the status quo 👌

The Typefaces project has been the long-standing approach to self-hosting Google fonts with your React web apps, but it wasn't without its caveats, as explained in the opening lines of the project's README.md:

The Typefaces project is now deprecated.

@DecliningLotus created FontSource which provides the same functionality as Typefaces but with automated releases & richer support for importing specific weights, styles, or language subsets.

Enter, Fontsource 🙇‍♂️

With Fontsource, you get a number of great benefits right out of the gate:

• Ridiculous performance gains from self-hosting (source, source).
• Version locking ensures your fonts are free from Google's tinkering.
• Your fonts will be available even if your React app is running offline.
• Fontsource also includes Open Source fonts, not just Google's library.

Why are we still talking about it? Let's use some fonts already!

Using Fontsource with React 🔤

As an example, let's use the Google Font "Poppins".

A note from the installation docs:

Fontsource assumes you are using a bundler, such as Webpack, to load in CSS. Solutions like CRA, Gatsby and Next.js are prebuilt examples that are compatible.

Now, on to the fun part:

1. In your project directory, install the font:
   

   npm install @fontsource/poppins
   

2. In your app or index JS file, import the font:
   

   import "@fontsource/poppins" // Defaults to weight 400 with all styles included.
   

3. Alternatively, in your project SCSS file, prepend the following to the top:
   

   @import "~@fontsource/poppins/index.css"; // Defaults to weight 400 with all styles included.
   

4. Lastly, use the font in your CSS/SCSS rules:
   

   body {
   font-family: "Poppins";
   }
   

And that's it!

As long as your chosen font supports it, you can optionally import other subsets that you need, for example:

@import "~@fontsource/poppins/700.css"; /* Font-weight 700 */
@import "~@fontsource/poppins/600-italic.css"; /* Font-weight 600 italic */

But do they have x font? 🙄

Fontsource has an amazing search directory that lists all supported fonts. It also allows you to interactively adjust font-size on the fly.

Better still, every font page lists the npm installation commands and JavaScript/SCSS import scripts needed to get you up and running in seconds.

You now have all the knowledge you need to make your React app beautiful with any self-hosted font you could want (aside from comic-neue and lobster, because you want your React app to look beautiful, right? 😅).

Cover photo source: Photo by Marcus dePaula on Unsplash

Edit 30/08/2021: Updated Fontsource package names (as they were moved from fontsource-[font] to @fontsource/[font].
Edit 30/08/2021: Updated Fontsource links (thank you, @jerhowden! 🙇‍♂️)