Install

Fontsource provides a straightforward process for installing fonts into your web application. This guide will walk you through the installation steps.

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.

Variable Fonts

If your chosen font supports variable fonts, Fontsource highly recommends using them, especially when working with multiple weights, as it helps reduce bundle sizes. To learn more about using variable fonts, refer to the dedicated Variable Fonts guide.

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 font package. For example, to install the Open Sans font, run the following command:

⬤⬤

npm install @fontsource/open-sans

⬤⬤

yarn add @fontsource/open-sans

⬤⬤

pnpm add @fontsource/open-sans

⬤⬤

bun add @fontsource/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.

Default Import

The most straightforward way to import a font is using its package name directly. This will import the most common weight, which is 400 for most fonts.

⬤⬤

import "@fontsource/open-sans"; // Defaults to weight 400.

jsx

Specific Weights and Styles

To minimize your bundle size, it is recommended to import only the specific weights and styles you need. A single import statement will load one font file.

⬤⬤

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

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 to use all available weights and styles, you must import each one individually. Due to the large file size, this is generally not recommended unless you have a specific use case.

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.