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

To use a variable font with Fontsource, you need to install the corresponding variable font package. For example, if you want to use the Roboto Flex variable font, you would install the @fontsource-variable/roboto-flex package:

npm install @fontsource-variable/roboto-flex

yarn add @fontsource-variable/roboto-flex

pnpm add @fontsource-variable/roboto-flex

bun add @fontsource-variable/roboto-flex

2. Import the Font

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

// Supports weights 100-900 in a single small file.
import "@fontsource-variable/roboto-flex";

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:

// Supports weights 100-900 in italic style.
import "@fontsource-variable/roboto-flex/wght-italic.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:

body {
    font-family: "Roboto Flex 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

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/roboto-flex or any other font as the fallback, however, it is also fine to rely on default system fonts for this. Here’s an example:

body {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 500;
}

@supports (font-variation-settings: normal) {
    body {
        font-family: "Roboto Flex 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

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

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:

import "@fontsource-variable/roboto-flex/wght.css";
import "@fontsource-variable/roboto-flex/wdth-italic.css";
import "@fontsource-variable/roboto-flex/slnt.css";
import "@fontsource-variable/roboto-flex/opsz-italic.css";

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

import "@fontsource-variable/roboto-flex/standard.css";
import "@fontsource-variable/roboto-flex/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

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

import "@fontsource-variable/roboto-flex/grad.css";
import "@fontsource-variable/roboto-flex/ytuc.css";
import "@fontsource-variable/roboto-flex/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 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:

import "@fontsource-variable/roboto-flex/full.css";
import "@fontsource-variable/roboto-flex/full-italic.css";