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. You can find a list of available fonts in the Fontsource directory. 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 using the package name. For example, to import Open Sans into index.jsx, add the following code:

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

4. Weights and Styles

If you only need specific font weights or styles, you can import them individually to reduce the payload size. Fontsource allows you to select weights and styles precisely. To import a specific weight or style, use the corresponding imports. For example:

import "@fontsource/open-sans/500.css"; // Weight 500.
import "@fontsource/open-sans/900-italic.css"; // Italic variant.

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

5. CSS

Once the font is imported, you can reference it in your CSS stylesheets, CSS Modules, or CSS-in-JS. Use the font family name associated with the font package you installed. For example:

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

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