CSS font-stretch Property

CSS font-stretch property is used to set the expended or condensed face of a font.

It is to be noted that the font family you are using might not have expanded or condensed face of fonts. In this situation, the font-stretch property has no effect.

Example:

.p1{
  font-family: Arial, Helvetica, sans-serif;
  font-stretch: condensed;
}

---

CSS Syntax

The font-stretch property has the following syntax:

font-stretch: normal|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;

Property Values

The font-stretch property accepts the following values:

normal	This is the default value. The fonts are displayed normally without any stretching.
ultra-condensed	Specifies the most condensed face of fonts.
extra-condensed	Fonts are condensed more than condensed face but less than ultra-condensed.
condensed	Specifies the condensed face of fonts.
semi-condensed	Fonts are slightly condensed.
semi-expanded	Fonts are slightly expanded.
expanded	Specifies the expanded face of fonts.
extra-expanded	Fonts are slightly more stretched than an expanded face.
ultra-expanded	Specifies the most expanded face of fonts.
initial	Sets the font-stretch property to its default value(normal).
inherit	Inherits the font-stretch property from the parent element.

General Info

Default Value	normal
Inherited	Yes
JavaScript Usage	element.style.fontStretch = “condensed”;