Check out Amazon Advertising for Humans. Now in closed beta 🚀

React Fonts with Fontsource



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="" />
<link rel="preconnect" href="" crossorigin />

That method results in the following lighthouse score

with font link, shows 2.5 seconds first contentful paint

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

with font source, shows .8 seconds first contentful paint

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


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


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.

Amazon Ad Analytics For Humans

Advertising reports automatically saved and displayed beautifully for powerful insights.
portfolios page sunburst chart