How do install fonts using npm?

I use typefaces yarn add typeface-roboto

and then just do a require("typeface-roboto") / import "./typeface-roboto" or whatever font you choose.

I hope this is the answer you're looking for?

Use fontsource, typefaces is deprecated now.

yarn add @fontsource/open-sans // npm install @fontsource/open-sans

Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (layout.js), page component (index.js), or gatsby-browser.js.

import "@fontsource/open-sans" // Defaults to weight 400 with all styles included.

Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for.

import "@fontsource/open-sans/500.css"; // All styles included.
import "@fontsource/open-sans/900-normal.css"; // Select either normal or italic.

Alternatively, the same solutions could be imported via SCSS!

@import "~@fontsource/open-sans/index.css";
@import "~@fontsource/open-sans/300-italic.css";

Fontsource

The typefaces project is now deprecated and its successor is fontsource.

Usage

There's no much difference at the point of using it.

Install:

yarn add @fontsource/open-sans // npm install @fontsource/open-sans

Import:

import "@fontsource/open-sans"

Reference:

body {
  font-family: "Open Sans";
}