No need for web fonts - give the browser a break!

Are you using a snippet provided by Google Fonts to load fonts for your web application?

What if I told you that the cool kid on the block (Vercel) has some performance gains for you?

• Quicker page load
• Reduced network requests
• Version locked fonts
• Offline support

You can take advantage of these gains by using a library they've provided called Fontsource.

It's a monorepo full of open source fonts which are version locked (unlike google Fonts, who can update a font at any given time), allowing you to manage your fonts like any other project dependency.

By using Fontsource you're also giving the browser a break and skipping a render-blocking request as your fonts will be hosted right there in your production code. No need to go and get the css file and then download the fonts. Check out some of the performance benchmarks here 🔥

Google also performs some tracking on their fonts, so sticking with a Google web font ties you into being tracked without warning.

Fontsource doesn't just support Google Fonts either, they have an evolving set of open source fonts too!

Using Fontsource also allows your fonts to work offline which is great for PWAs and also working locally, as your fonts are available without the need for fetching.

Here's an example of how to get started in a NextJS project using the Google Font, Inter.

yarn add @fontsource/inter

Then all we need to do is import it wherever we want to use it. In this example I want it available globally in my app, so I'm importing it in my _app.tsx.

import "@fontsource/inter";

Fontsource also allows you to select weights and even styles, allowing you to trim the payload!

import "@fontsource/inter/700.css";
import "@fontsource/inter/700-italic.css"

The font can then be referenced anywhere in your application using a CSS stylesheet, CSS Module, or CSS-in-JS.

body {
  font-family: "Inter", sans-serif;
}

Give Fontsource a go, it makes life so much easier when dealing with fonts!