CSS font-stretch Descriptor
font-stretch descriptor is used with the
@font-face at-rule to match the font width to a specific font face.
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
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.
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.
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
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.
font-stretch descriptor has the following syntax:
This means that the value can be any one of the following keywords: