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
2. Import the Font
After installing the package, you can import the font into your project like this:
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:
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:
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.
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:
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.
Fontsource’s variable axes encompass a range of
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:
However, if you want to import multiple standard axes, it is recommended to use the
standard CSS file instead:
Note: Each import includes the
wghtaxis as multiple imports of different axes are not supported. Therefore, you must use a single import when importing variable fonts.
In addition to the standard axes, Fontsource provides a variety of custom options. To import these axes individually, you can use the following syntax:
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: