@font-face defines a web font, its source files, its available weights and styles, and its loading behavior. Place each rule at the top of the stylesheet. section 9.4.1 section 9.9
Configure the rule with descriptors that describe the font and its loading:
- font-family names the font used later by the font-family property. section 9.4.1
- src lists font locations and formats; the browser tries the sources in order until one loads successfully. section 9.4.1
- font-weight identifies a file's weight, or gives a range when the file is a variable font. section 9.4.1
- font-display: swap limits font blocking so content remains available while the font finishes loading. section 9.4.1
Load regular and italic Open Sans
Use a variable WOFF2 file for normal text when multiple weights are needed, but use a smaller static regular file for italic. A separate @font-face rule describes each variation. 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 declarations, including WOFF2 format, a 100–800 variable weight range, a local italic source, and swap loading. section 9.4.1
