Variable font
A variable font is a font file containing one or more adjustable design axes, such as weight or width, within a single font resource.
CSS in Depth, Second Edition
A variable font is a font file containing one or more adjustable design axes, such as weight or width, within a single font resource.
- How it is used
- Uses one web-font resource to supply multiple weights while reducing downloads compared with separate font files.
- How deep it goes
- Defines variation axes and works through an @font-face weight range, precise weight values, and the lower-level 'wght' axis.
- Examples
- Shows an Open Sans WOFF2 declaration spanning weights 300–800 and an intermediate weight of 467.
- What you can do after
- Operate/configure it with @font-face and font-weight to select supported intermediate weights from one file.
Read how CSS in Depth, Second Edition explains variable font →
Tiny CSS Projects
A variable font is a font file that contains one or more adjustable design axes, such as weight or width, within a single font resource.
- How it is used
- Configures web typography by consolidating multiple font weights into one resource while preserving browser fallbacks.
- How deep it goes
- Explains file selection, @font-face declarations, weight ranges, italic exceptions, file-size tradeoffs, and @supports fallbacks.
- Examples
- Demonstrates Open Sans in a virtual credit card, combining a variable normal font with a static italic font.
- What you can do after
- Operate CSS font loading with @font-face and @supports while balancing weight flexibility, italic coverage, compatibility, and file size.
Related concepts
- variation axisuses · A variation axis is a font-defined dimension specifying an allowable range for a particular characteristic of a variable font.
- font-weightproduces · Font weight is a typographic property specifying the relative thickness or visual heaviness of text glyphs, commonly through named or numeric values.
- font stylealternative to · A font style is a stylistic variant of a typeface distinguished by properties such as weight, width, slant, or spacing.
- Google Fontspart of · Google Fonts is an online catalog and delivery service providing openly licensed typefaces and resources for using them in websites and applications.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.