A variable font is a font file containing adjustable design axes, such as weight or width, inside one resource. Instead of importing separate files for regular, semibold, and bold, one file can provide the range from thin to extra-bold. section 9.4.1
Use variable fonts with a few practical limits in mind:
- Declare the file with @font-face and describe its supported weight range, such as font-weight: 100 800. section 9.4.1
- Keep italic separate when the typeface supplies different italic glyphs or when only one italic weight is needed; a static file can be much smaller. section 9.4.1
- Provide static-font fallbacks with @supports so browsers without variable-font behavior load compatible files instead. section 9.4.2
- Retain a generic family such as sans-serif in font-family if the preferred font fails to load. section 9.4.2
Open Sans for a virtual credit card
Load Open Sans normal weights from open-sans-variable.woff2 with font-weight: 100 800, then load a regular italic WOFF2 or WOFF file separately. Apply "Open Sans", sans-serif to the body so the project uses the custom typeface while retaining a final fallback. section 9.4.1 section 9.4.2
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 for a variable normal font and a separate italic font. section 9.4.1
Listing 9.17 Fallback for browsers that don’t support variable fonts
@supports (font-variation-settings: normal) { #1
@font-face { #2
font-family: "Open Sans"; #2
src: url("./fonts/open-sans-variable.woff2") #2
format("woff2-variations"); #2
font-weight: 100 800; #2
font-style: normal; #2
font-display: swap; #2
} #2
}
@supports not (font-variation-settings: normal) { #3
@font-face { #4
font-family: "Open Sans";
src: local("Open Sans Regular"),
local("OpenSans-Regular"),
url("./fonts/open-sans-regular.woff2") format("woff2"),
url("./fonts/open-sans-regular.woff") format("woff");
font-weight: normal;
font-display: swap;
}
@font-face { #5
font-family: "Open Sans";
src: local("Open SansBold"),
local("OpenSans-Bold"),
url("./fonts/open-sans-regular.woff2") format("woff2"),
url("./fonts/open-sans-regular.woff") format("woff");
font-weight: bold;
font-display: swap;
}
}
Compare the @supports rules that load the variable file only when supported and static files otherwise. section 9.4.2
