Limited supportUse with care and confirm browser support before shipping it to all users.
Typography Limited support

font-width

The font-width CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Typography

Overview

The font-width CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-width
Experimental
18.4
DOM API
fontWidth
Experimental
26
26
CSS at-rule
font-width
Experimental

The font-width CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face at-rule.
18.4
CSS property
condensed
Experimental
18.4
expanded
Experimental
18.4
extra-condensed
Experimental
18.4
extra-expanded
Experimental
18.4
normal
Experimental
18.4
semi-condensed
Experimental
18.4
semi-expanded
Experimental
18.4
ultra-condensed
Experimental
18.4
ultra-expanded
Experimental
18.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.narrow {
  font-width: condensed;
}
.wide {
  font-width: expanded;
}
.custom { font-width: 80%; }

Live demo

Condensed(narrow)

CSS Condensed(narrow) demo.

PreviewFullscreen

Expanded(wide)

CSS Expanded(wide) demo.

PreviewFullscreen

80%(custom)

CSS 80%(custom) demo.

PreviewFullscreen

Use cases

  • Refine text rhythm

    Use font-width to make long-form reading or dense interface copy easier to scan and understand.

  • Support language nuances

    Apply font-width when different writing systems or typographic conventions need more deliberate control.

Cautions

  • Test font-width in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.

Related links

Powered by web-features