The font-display property is used to control how web fonts are displayed and rendered before they are fully loaded. It allows you to define the behavior of fallback fonts or font loading strategies, providing better control over font rendering and user experience.
The property accepts several values, including auto, block, swap, fallback, and optional. One common value used is swap, which enables an immediate fallback font to be displayed while the web font is loading. This ensures that the text remains visible and readable even if the web font takes some time to load.
For example, consider the following declaration:
@font-face {
font-family: "Open Sans";
src: url("open-sans.woff2") format("woff2"), url("open-sans.woff") format("woff");
font-display: swap;
}
In this example, the font-display: swap; rule is applied to the Open Sans font. It instructs the browser to display a fallback font until the Open Sans font is available. This ensures that the text remains visible and readable, even during the font loading process.
The font-display property allows developers to fine-tune font loading behavior, optimizing the user experience and ensuring legible text even under varying network conditions.