Intro

I didn’t expect this, but loading fonts by linking them from Google Fonts in your index file is actually very slow and is a major source of render blocking.

Take for example this font link, loading a couple of weights of the Inter font in a React index.html file like so

<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap"
    rel="stylesheet"
/>

That method results in the following lighthouse score

but if we instead just include that font as a package in our application (and with no other changes) we get the following score

That’s a pretty crazy jump for a simple change. Let’s show how to include the fonts as a package.

Fontsource

There may be other ways to package fonts with your application, but I don’t know why you would bother. Fontsource works perfectly and is very easy to implement.

You just install the font you need as an npm package

yarn add @fontsource/somefont

or

npm install @fontsource/somefont

and then import the styles you want

import "@fontsource/inter/100.css"
import "@fontsource/inter/200.css"
import "@fontsource/inter/300.css"
import "@fontsource/inter/400.css"
import "@fontsource/inter/500.css"
import "@fontsource/inter/600.css"
import "@fontsource/inter/700.css"
import "@fontsource/inter/800.css"
import "@fontsource/inter/900.css"

and then designate the font in your CSS

:root {
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

and that’s it, you are rockin.

A small change with a big benefit.

It works on a bunch of other platforms as well.