font-display is an @font-face descriptor that controls how text behaves while a web font loads. The value swap lets content appear and keeps the interface usable if the font is not ready; the browser applies the font when loading finishes. section 9.4.1
Using swap in a font declaration
Add font-display: swap; inside each @font-face rule. The supplied Open Sans declarations use swap for both a variable font and an italic fallback, alongside their source URLs, styles, and weights. section 9.4.1
Listing 9.16 Declaring our fonts
@font-face {
font-family: "Open Sans"; #1
src: url("./fonts/open-sans-variable.woff2") #2
format("woff2-variations"); #2
font-style: normal;
font-weight: 100 800; #3
font-display: swap;
}
@font-face {
font-family: "Open Sans"; #1
src: local("Open Sans Italic"), #4
url("./fonts/open-sans-regular.woff2") format("woff2"), #5
url("./fonts/open-sans-regular.woff") format("woff"); #6
font-style: italic;
font-weight: normal; #7
font-display: swap;
}
Inspect the complete @font-face declarations, including font-display: swap, variable-font ranges, local sources, and fallback formats. section 9.4.1
