Install

Fontsource packages let you bundle and self-host fonts with your web application. When a family supports variable fonts, start with its variable package. It provides a continuous range of weights and often needs fewer files than several static faces.

Prerequisites

Before proceeding with the installation, ensure that you are using a bundler, such as Vite or Webpack, to handle importing CSS into your final bundle. Please refer to the Fontsource Guides section to see detailed instructions for your preferred framework.

If a family does not provide a variable package, use its static package instead.

Setup

To install a font from Fontsource, follow the steps below.

1. Choose a Package

Select the font package you wish to install. Each font package corresponds to a specific font.

2. Install the Package

Use your preferred package manager to install the variable package. For example, to install Open Sans, run:

npm install @fontsource-variable/open-sans

Note: Alternatively, you can download the font files yourself in each directory listing.

3. Import the Font

In your application’s entry file, page, or site component, import the font package. The import method determines which font files are included.

Recommended Import

Import the package once in your application’s entry file. The default variable face usually includes the full weight range in the normal style.

import "@fontsource-variable/open-sans";

jsx

The generated CSS uses unicode-range, so the browser downloads only the character sets used on the page. You normally do not need to choose subsets manually. See Subsets for the uncommon cases that need explicit subset imports.

To use italic or additional variable axes, see the Variable Fonts guide.

Static Fonts

Use the static package when a family has no variable font or when your project specifically needs fixed font faces.

npm install @fontsource/open-sans

Import only the weights and styles the project uses. Each import adds one fixed face.

The root import provides the default weight, which is 400 for most families:

import "@fontsource/open-sans";

jsx

Specific weights and styles use their own imports:

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

jsx

If you need both a regular and an italic style for the same weight, you’ll need two separate imports. The import for a normal style does not include its italic variant.

import "@fontsource/open-sans/900.css"; // Includes weight 900.
import "@fontsource/open-sans/900-italic.css"; // Includes weight 900 in italic style.

jsx

If you need many weights, prefer the variable package instead of adding every static face.

Note: Each font package will provide information on the supported weights and styles in the directory listing or package README.

4. TypeScript Configuration

If you’re using TypeScript, you may encounter errors when importing CSS files due to TypeScript’s noUncheckedSideEffects flag. To resolve this, add ambient module declarations to your project.

Create a global TypeScript declaration file (e.g., src/globals.d.ts) and include the following:

// ./src/globals.d.ts
declare module "*.css";
declare module "@fontsource/*" {}
declare module "@fontsource-variable/*" {}

This tells TypeScript to allow imports from CSS files and Fontsource packages without type checking.

Note: If you’re using a bundler like Vite or a framework that handles CSS imports automatically, you likely won’t need to do this.

5. CSS

Once the font is imported, you can reference it in your CSS stylesheets, CSS Modules, or CSS-in-JS using the font family name.

body {
 font-family: "Open Sans", sans-serif;
}

css

That’s it! You have successfully installed and imported a font from Fontsource into your web application.