Documentation
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:⬤⬤
sh
⬤⬤
sh
⬤⬤
sh
2. Import the Font
After installing the package, you can import the font into your project like this:
⬤⬤
jsx
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
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
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:⬤⬤
css
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, a font provider, supports variable axes in its fonts, enabling users to leverage these customizable options for their design needs.
Fontsource’s variable axes encompass a range of standard and custom options. The standard axes include:
⬤⬤
jsx
Note: Every import includes thewght
axis as multiple imports of different axes are not supported. You must use a single import when importing variable fonts.
If you are using multiple of the above axes, you can import them all at once using the
standard
CSS file:⬤⬤
jsx
In addition to these standard axes, Fontsource also provides support for specific custom axes, such as:
⬤⬤
jsx
Note: The above axes are not supported by all fonts. Please refer to the font page in the search directory to see which axes are available.
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
By leveraging Fontsource’s variable axes, designers and developers can precisely tailor the visual attributes of fonts, achieving the desired typographic effect and enhancing the overall aesthetic of their projects.