CSS font-stretch Descriptor

The CSS font-stretch descriptor is used with the @font-face at-rule to match the font width to a specific font face.

The font-stretch descriptor is not to be confused with the font-stretch property. The font-stretch descriptor is used solely with the @font-face at-rule to explicitly select expanded or narrow font faces for that rule. The font-stretch property is then used elsewhere in the style sheet to apply that font width to an element.

Here's an example of using the font-stretch descriptor.

About Condensed & Expanded Font Faces

When designing a font, type designers will sometimes make condensed versions and/or expanded versions of the same font. These are glyphs that are narrower or wider than the normal glyph, and you can select these from within your CSS as required.

Here's an example of a normal font vs a condensed version.

Normal font face vs condensed face. — Roboto and Roboto Condensed.

Some fonts come in many different widths, such as condensed, semi-condensed, extra-condensed, expanded, extra-expanded, etc. Some might come in one or two widths. Other fonts have no such variations — they come in one width only.

CSS includes nine keywords that can be used to select the most appropriate width. For example expanded selects the expanded face, extra-expanded selects one that's more expanded, and ultra-expanded selects one that even more expanded again.

However, this all depends on whether the font has an available glyph for that keyword. If you select ultra-expanded but the font only has an expanded face, then the expanded face is selected. If the font only has a normal face then the normal face is selected. In other words, the browser doesn't try to condense or expand the font. It only selects the most appropriate font face for your chosen keyword.

Here are two examples to demonstrate this; one with the chosen glyph, the other without it.

Available Glyph

Here we use two @font-face at-rules to explicitly load the normal and condensed versions of the font. We use the font-stretch descriptor to specify whether it's to be "stretched" (in our case, "condensed") or not. So we have one rule for the condensed version and one for the normal version. We then use the font-stretch property to actually select the condensed glyph for the condensed class.

<!doctype html>
<title>Example</title>
<style>
/* The normal face */
@font-face {
  font-family: "Roboto";
  font-stretch: normal;
  font-weight: 400;
  src: url(/samples/fonts/roboto.woff2) format("woff2");
}
/* The condensed face */
@font-face {
  font-family: "Roboto";
  font-stretch: condensed;
  font-weight: 400;
  src: url(/samples/fonts/roboto-condensed.woff2) format("woff2");
}
body { 
  font-family: Roboto, serif;
  font-size: 8vw;
  background: beige;
  } 
.condensed {
  font-stretch: condensed;
}
</style>

<p>Sesquipedalian</p>
<p class="condensed">Sesquipedalian</p>

Unavailable Glyph

Here we remove the extra @font-face rule that loads the the condensed faces. Therefore we only load one for the normal (non-condensed) version. In this case, the font-stretch property has no effect — the browser does not try to condense the glyph, it simply displays the normal glyph at its normal width.

<!doctype html>
<title>Example</title>
<style>
/* The normal face */
@font-face {
  font-family: "Roboto";
  font-stretch: normal;
  font-weight: 400;
  src: url(/samples/fonts/roboto.woff2) format("woff2");
}
body { 
  font-family: Roboto, serif;
  font-size: 8vw;
  background: beige;
  } 
.condensed {
  font-stretch: condensed;
}
</style>

<p>Sesquipedalian</p>
<p class="condensed">Sesquipedalian</p>

Official Syntax

The font-stretch descriptor has the following syntax:

This means that the value can be any one of the following keywords:

ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded

Official Specifications

The font-stretch descriptor is defined in CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013).