WOFF2 is a web font file format that uses Brotli compression. It continues WOFF and is about 30% more compressed, making it a recommended choice for web fonts. section 9.4.1
Use WOFF2 with these practical font-loading considerations:
- Prefer WOFF or WOFF2 for web fonts; newer browser support often makes it unnecessary to provide several font formats. section 9.4.1
- Include each required weight and style separately unless a variable font provides multiple permutations in one file. section 9.4.1
- Treat italic as potentially separate from regular text because some typefaces use different italic glyphs. section 9.4.1
Loading Open Sans
A virtual credit-card interface loads Open Sans using WOFF2 files: a variable normal font covering weights 100 through 800, plus an italic declaration. The @font-face rules specify the family, file URL, format, style, weight, and font-display behavior. 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 font declarations to see WOFF2 URLs, format values, variable weight ranges, local fallbacks, and italic handling. section 9.4.1
