Fontsource provides a feature that allows users to customize the
font-displayproperty 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-displayproperty, follow these steps:
1. CSS Variable
Each font uses the following CSS variable to set the
font-displayproperty with the default value of
swapif the CSS variable is undefined:
2. Defining Display
To change the
font-displayproperty, you need to define the
--fontsource-displayCSS variable with the desired value. This can be done in your application’s CSS file or in a style block within your HTML.