CSS font-stretch Property


The font-stretch property in CSS is used to set the text wider or narrower. This property is not working any font. Its only work when font family has a width-variant face.

The font-stretch property allows you to make text narrower (condensed) or wider (expanded).

Note: Some fonts provide additional faces; condensed faces and expanded faces. For these fonts, you can use the font-stretch property to selct a normal, condensed, or expanded font face.

Possible Values

  • ultra-condensed − The text characters in the element will be narrowed extremely.

  • extra-condensed − The text characters in the element will be narrowed significantly.

  • condensed − The text characters in the element will be narrowed, more so than if the value were semi-condensed.

  • semi-condensed − The text characters in the element will be slightly narrowed, making them narrower than if the value were normal.

  • normal − The text characters in the element are of normal width.

  • semi-expanded − The text characters in the element will be slightly widened, making them wider than if the value were normal.

  • expanded − The text characters in the element will be widened, making them wider than if the value were semi-expanded.

  • extra-expanded − The text characters in the element will be widened greatly, making them wider than if the value were expanded.

  • ultra-expanded − The text characters in the element will be widened extremely, making them wider than if the value were extra-expanded.

  • wider − The width of text characters in the element will be wider than those of their parent element.

  • narrower − The width of text characters in the element will be narrower than those of their parent element.

Syntax

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

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -