How to: Self-hosted fonts via NPM packages

We usually ship applications that self-host webfonts to comply with GDPR.

Many popular web fonts are available as NPM packages provided by Fontsource Show archive.org snapshot .
We recommend using those instead of downloading and bundling font files yourself. (See below for a list of benefits.)

Usage

1. Go to fontsource.org Show archive.org snapshot and search for the font you want to add (or a font that suits your application).
2. Click the font card to view its details page.
3. On the top right, navigate to the "Install" tab to see the NPM package name.
4. Install the package for your application.
5. In your application, import the package's CSS as described by the install page.

Weights and variants

The "Import" section offers filter buttons for different font weights, or variants.
Check those that you need for your application to see the CSS file(s) to import.

Variable fonts

Some fonts are available as a variable variant. They are supported by all relevant browsers Show archive.org snapshot and implement different variants of a font in a single file. This means that your users need to download only a single file for e.g. regular and bold text.You'll notice a "Variable" badge, and the NPM source being e.g. @fontsource-variable/roboto instead of @fontsource/roboto.Variable fonts allow dynamically adjusting settings like font weights or widths through CSS font-variation-settings Show archive.org snapshot . Check a font's Fontsource details page for available settings.

Why?

Using an NPM package has some benefits over placing fonts into your repo:

All font weights and glyphs are included.

You don't need to download and add files for latin, greek, cyrillic, or other charsets.
Each package contains files for that (if the font offers such glyphs).

Their CSS files are usually smarter than any hand-crafted CSS rules.

Importing the package's CSS file will add multiple @font-face rules to your CSS. They contain different unicode-range values which map different font files to the glyphs they include. This means that e.g. the file for cyrillic glyphs is only loaded when any text containing them is presented to the user.
Due to that, your application's CSS will probably be a bit larger, but overall load times / performance should be much better.

Your application's repository size is not increased by large font files.

This one is simple: You don't add lots of files to your repo, just a few lines of text to package.json and your CSS.
Your bundler will still package all font files, even unneeded ones, but that consumes only disk space on your application servers.

Updating to the latest version of a font is trivial.

Yes, fonts are updated, occasionally.
You don't need to keep track of that, you'll just get them whenever you update your bundled packages.