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

#javascript #react #webdev #fonts

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:

In your project directory, install the font:
```
npm install @fontsource/poppins
```

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

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

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.

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! 🙇‍♂️)

Top comments (6)

aqrojo • Dec 12 '20

I didn't know Fontsource before your article Dan, thanks for sharing. I have a question, which is the benefice to use this package instead download and manage the font locally?

When I want to have a font in my project, usually I have a folder called assets/fonts in my src folder who contains the font files and the workaround to import them is similar to the described in your post

What's the difference between this two methods?

Dan Walsh • Dec 13 '20

Hey mate, glad you got something out of my post! ☺️

The main difference is that by using Fontsource, you are effectively treating your self-hosted fonts as package dependencies that can be version locked and updated as needed.

It also saves you from having to manage the font files themselves, and from having to maintain a directory structure for them.

For example: if you need an extra subset (weight 500 italic) then it’s just one import line away, as opposed to downloading the new subset, converting it with Transfonter, adding the converted files to your repo and then importing the font for use.