CSS Variable Fonts

CSS Variable Fonts

Variable fonts can store a range of font variations, such as different weights or widths, within a single font file.

Traditional font families often use separate files for regular, bold, light, condensed, italic, and other variations. A variable font can combine supported variations into one font resource and allow CSS to select values from the ranges built into that font.

How Variable Fonts Work

A traditional font family may provide separate font files for weights such as 300, 400, 500, 600, and 700. A variable font can store a continuous range of supported weights in a single font file.

Instead of being limited to the individual font files supplied by the family, CSS can request values from the ranges supported by the variable font.

p {
  font-weight: 450;
}

If the variable font supports that weight, the browser can render the requested value without requiring a separate font file specifically for weight 450.

Variable Font Axes

The characteristics that can change within a variable font are called variation axes. Each axis has a four-character tag and a range of values defined by the font.

A variable font does not necessarily support every axis. The available axes and their permitted ranges depend on how the individual font was designed.

Weight Axis

The wght axis controls font weight. When a variable font supports a range of weights, the normal font-weight property is generally the preferred way to select a value.

.light {
  font-weight: 300;
}
.medium {
  font-weight: 500;
}
.heavy {
  font-weight: 800;
}

Variable fonts may also support values between the familiar hundred-step weights.

.custom-weight {
  font-weight: 575;
}

The value must fall within the weight range provided by the font.

Width Axis

The registered wdth axis changes the width of the glyphs when the font provides width variations. CSS can access this axis through the font-stretch property.

.condensed {
  font-stretch: 75%;
}
.wide {
  font-stretch: 125%;
}

The values available depend on the width range built into the variable font.

Other Variable Font Axes

Variable fonts can provide additional registered axes for slant, italic forms, and optical sizing.

The slnt and ital axes relate to font style and can normally be controlled through the font-style property when the font supports them.

.italic-text {
  font-style: italic;
}
.slanted-text {
  font-style: oblique 12deg;
}

The opsz axis controls optical sizing. When supported, the browser can use optical sizing to adjust details of the typeface for different text sizes.

h1 {
  font-optical-sizing: auto;
}

@font-face Ranges

When a variable font is self-hosted, an @font-face rule can describe the range of values provided by the font.

@font-face {
  font-family: "VariableFont";
  src: url("VariableFont.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
}

The two values in the font-weight descriptor tell the browser that this font face supports weights from 100 through 900.

CSS can then request any supported weight within that range.

h1 {
  font-family: "VariableFont", sans-serif;
  font-weight: 725;
}

font-variation-settings

The font-variation-settings property provides low-level control over variation axes by using their four-character axis tags.

.example {
  font-variation-settings: "wght" 650;
}

Multiple axes can be specified by separating them with commas.

.example {
  font-variation-settings: "wght" 650, "wdth" 85;
}

For registered axes such as weight, width, and style, use higher-level CSS properties such as font-weight, font-stretch, and font-style when they provide the control you need. These properties express the purpose of the styling more clearly and participate normally in CSS font selection.

font-variation-settings is especially useful when working with custom axes that do not have corresponding CSS properties.

Registered and Custom Axes

Variable fonts can contain registered axes and custom axes. Registered axes use standardized tags such as wght, wdth, and opsz.

Font designers can also create custom axes for characteristics unique to a particular typeface. Custom axis tags use four uppercase ASCII letters.

.special {
  font-variation-settings: "GRAD" 100;
}

The meaning and permitted values of a custom axis are defined by the font. Check the font's documentation to determine which axes it provides and the range supported by each one.

Benefits of Variable Fonts

A variable font can provide many typographic variations without requiring a separate font file for every individual weight, width, or style. This can simplify font management and give designers more precise control over typography.

However, a variable font is not automatically smaller than every possible collection of traditional font files. File size depends on the font, the axes it contains, and the number of separate font files it replaces.

As with other web fonts, use only fonts and variations that contribute to the design, provide suitable fallback fonts, and consider the additional resources that visitors must download.

Variable Font Example

The following example uses Roboto Flex, a variable font available through Google Fonts. Three headings use different font-weight values from the same variable font family.

.light {
  font-weight: 300;
}
.medium {
  font-weight: 575;
}
.heavy {
  font-weight: 850;
}

Open the example in the editor and change the weight values to see how the same variable font can produce different levels of character thickness without selecting separate font-family names.