Skip to main content
Check out bidbear.io Automated Amazon Reports 🚀

React Fonts with Fontsource

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

index.html
<!-- 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

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.

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

App.js
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

text.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.

Importing Custom Fonts to Docusaurus 2.x

If you'd like to import a custom font package into a Docusaurus project so that it is globally available, you won't be able to directly import it into your App.js component as this is not available.

?? How to import the modules though?

custom.css
/* You can override the default Infima variables here. */
:root {
font-size: 16px;
font-family: "Inter", sans-serif;
font-weight: 400;

--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

Automated Amazon Reports

Automatically download Amazon Seller and Advertising reports to a private database. View beautiful, on demand, exportable performance reports.

bidbear.io
bidbear-application-screenshot