# Variable Fonts [#variable-fonts]

Variable fonts allow designers and developers to use a single font file that contains multiple variations of the same font, such as different weights, widths, and styles. This can result in **smaller file sizes** and **more flexible design options**. Here’s how you can use variable fonts with Fontsource:

## 1. Install Package [#1-install-package]

To use a variable font with Fontsource, you need to install the corresponding variable font package. For example, if you want to use the Nunito Sans variable font, you would install the `@fontsource-variable/nunito-sans` package:

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

## 2. Import the Font [#2-import-the-font]

After installing the package, you can import the font into your project like this:

```jsx
// Supports weights 200-1000 in a single small file.
import "@fontsource-variable/nunito-sans";
```

This will import the standard weight of the font. If you want to use a specific weight or variation, you can import the corresponding CSS file instead:

```jsx
// Supports weights 200-1000 in italic style.
import "@fontsource-variable/nunito-sans/wght-italic.css";
```

## 3. CSS [#3-css]

Once the font is imported, you can use it in your CSS stylesheets just like any other font. The difference with variable fonts is that you can specify the specific axis values you want to use. Here’s an example:

```css
body {
    font-family: "Nunito Sans Variable", sans-serif;
    font-weight: 500;
    font-variation-settings: "wdth" 75, "wght" 500;
}
```

In this example, we are setting the font weight to `500` and the width axis to `75%` of the maximum width. Note that not all axes are supported by all variable fonts, so you will need to consult the font documentation to see which axes are available.

## 4. Fallbacks [#4-fallbacks]

Optionally, if you want to use variable fonts but also support browsers that do not support them, you can use the `@supports` rule to provide a fallback. You will also need to import `@fontsource/nunito-sans` or any other font as the fallback, however, it is also fine to rely on default system fonts for this. Here’s an example:

```css
body {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 500;
}

@supports (font-variation-settings: normal) {
    body {
        font-family: "Nunito Sans Variable", sans-serif;
        font-weight: 500;
        font-variation-settings: "wdth" 75, "wght" 500;
    }
}
```

This will only apply the font styles if the browser supports variable fonts (`font-variation-settings`). Otherwise, it will use the fallback font.

## Understanding Variable Axes [#understanding-variable-axes]

Variable axes in fonts refer to the ability to adjust various visual characteristics of a font along a continuous spectrum. This allows for greater flexibility and control in fine-tuning the appearance of typography.

### Standard Axes [#standard-axes]

Fontsource’s variable axes encompass a range of `standard` and `custom` options. The standard axes consist of a small subset of the most commonly used axes, including `[wght, wdth, slnt, opsz, ital]`. If you want to import these axes individually, you can do so using the following syntax:

```jsx
import "@fontsource-variable/nunito-sans/wght.css";
import "@fontsource-variable/nunito-sans/wdth-italic.css";
import "@fontsource-variable/nunito-sans/opsz.css";
```

However, if you want to import multiple standard axes, it is recommended to use the `standard` CSS file instead:

```jsx
import "@fontsource-variable/nunito-sans/standard.css";
import "@fontsource-variable/nunito-sans/standard-italic.css";
```

> **Note:** Each import includes the `wght` axis as multiple imports of different axes are not supported. Therefore, you must use a single import when importing variable fonts.

### Custom Axes [#custom-axes]

In addition to the standard axes, Fontsource provides a variety of custom options. To import these axes individually, you can use the following syntax:

```jsx
import "@fontsource-variable/nunito-sans/grad.css";
import "@fontsource-variable/nunito-sans/ytuc.css";
import "@fontsource-variable/nunito-sans/xtra.css";
```

> **Note:** Please note that not all fonts support these custom axes. To see which axes are available for a specific font, refer to the font’s page in the search directory. You can also explore the [**Axis Registry**](https://fonts.google.com/variablefonts#axis-definitions) to learn more about these various axes.

These custom axes offer additional opportunities for fine-grained customization beyond the standard options, providing more specialized variations. If you want to import **all** available axes, you can use the `full` CSS file:

```jsx
import "@fontsource-variable/nunito-sans/full.css";
import "@fontsource-variable/nunito-sans/full-italic.css";
```