Documentation

Fontsource provides a feature that allows users to customize the font-display property for imported fonts using CSS variables. This feature gives you more control over how fonts are displayed and loaded in your web application.

Before proceeding with customizing the font-display, ensure that you have already installed the desired font package using Fontsource. If you haven’t done so, please refer to the Install guide for instructions on installing fonts from Fontsource.

To customize the font-display property, follow these steps:

Each font uses the following CSS variable to set the font-display property with the default value of swap if the CSS variable is undefined:

@font-face {
  ...
  font-display: var(--fontsource-display, swap);
  ...
}

To change the font-display property, you need to define the --fontsource-display CSS variable with the desired value. This can be done in your application’s CSS file or in a style block within your HTML.

:root {
  --fontsource-display: optional;
}