DEV Community

loading...
Cover image for Self-host Google Fonts in your next React project with Fontsource

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

danwalsh profile image Dan Walsh ・3 min read

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 */
Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

pic
Editor guide
Collapse
aqrojo profile image
aqrojo

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?

Collapse
danwalsh profile image
Dan Walsh Author

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.

Collapse
brds15 profile image
Bruno Rodrigues dos Santos • Edited

There is another advantage: its run offline, so, you can use it in a progressive web app :)

Collapse
danwalsh profile image
Dan Walsh Author

Exactly! 😊