# Install [#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 [#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](/docs/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 [#setup]

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

### 1. Choose a Package [#1-choose-a-package]

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

### 2. Install the Package [#2-install-the-package]

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

```sh
npm install @fontsource-variable/open-sans
yarn add @fontsource-variable/open-sans
pnpm add @fontsource-variable/open-sans
bun add @fontsource-variable/open-sans
```

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

### 3. Import the Font [#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 [#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.

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

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](/docs/getting-started/subsets) for the uncommon cases that need explicit subset imports.

To use italic or additional variable axes, see the [Variable Fonts](/docs/getting-started/variable) guide.

#### Static Fonts [#static-fonts]

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

```sh
npm install @fontsource/open-sans
yarn add @fontsource/open-sans
pnpm add @fontsource/open-sans
bun add @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:

```jsx
import "@fontsource/open-sans";
```

Specific weights and styles use their own imports:

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

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.

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

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 [#4-typescript-configuration]

If you’re using TypeScript, you may encounter errors when importing CSS files due to TypeScript’s [`noUncheckedSideEffects`](https://www.typescriptlang.org/tsconfig/#noUncheckedSideEffectImports) 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:

```ts
// ./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 [#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.

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

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