Widely availableSupported across all major browsers. Safe to use in production.
Typography Widely available

font-stretch

The font-stretch CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.

Typography

Overview

The font-stretch CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-stretch
60
12
9
11
60
11
CSS at-rule
font-stretch

The font-stretch CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face at-rule.
62
17
62
10.1
62
10.3
CSS property
condensed
60
12
9
11
60
11
expanded
60
12
9
11
60
11
extra-condensed
60
12
9
11
60
11
extra-expanded
60
12
9
11
60
11
normal
60
12
9
11
60
11
percentage

`<percentage>` syntax
62
18
61
11.1
62
11.3
semi-condensed
60
12
9
11
60
11
semi-expanded
60
12
9
11
60
11
ultra-condensed
60
12
9
11
60
11
ultra-expanded
60
12
9
11
60
11
font-width keyword values

`font-width` keyword values in shorthand
60
79
43
11
60
11
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • A `font-stretch` declaration must be added to the `@font-face` before this property will function.
Notes 1 item(s)
Implementation note
  • A `font-stretch` declaration must be added to the `@font-face` before this property will function.

Syntax

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

Live demo

condensed（75%）

CSS Condensed(75%) demo.

PreviewFullscreen

normal（100%）

CSS Normal(100%) demo.

PreviewFullscreen

expanded（125%）

CSS Expanded(125%) demo.

PreviewFullscreen

Use cases

  • Using font-stretch

    The font-stretch CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features