How do install fonts using npm?

Question

I want to install fonts using npm, for example, Open Sans or Roboto. If I search for Open Sans on npm and filter for packages with over 1000 downloads per month I find a whole list. I am not sure which source to choose here, some are not well maintained and none of them are from the original source of the font, in this case, google.

• npm-font-open-sans
• typeface-open-sans
• open-sans-all
• open-sans-fontface
• opensans-npm-webfont

I noticed that fonts are often used through a direct link to fonts.googleapis. I would prefer to have a local copy of the font to be able to develop offline. Is there a common way to install fonts through npm? Or is there another automated font download tool that I'm not aware of?

Answer 1

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";

Answer 2

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";
}