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.