font-widthLimited availability

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.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome

✕Not supportedup to 155

Current: 155

Edge

✕Not supportedup to 154

Current: 154

Firefox

✕Not supportedup to 157

Current: 157

Safari

1–18.3Not supported

18.4+Supportedsince Mar 31, 2025

Current: 27

MobileChrome Android

✕Not supportedup to 155

Current: 155

Firefox Android

✕Not supportedup to 157

Current: 157

Safari iOS

1–18.3Not supported

18.4+Supportedsince Mar 31, 2025

Current: 27

How to use

Not supported in Chrome, Edge, Firefox, Chrome Android, Firefox Android. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: font-width.

Feature detection

CSS · check before using

@supports (font-width: initial) {
  /* styles that rely on font-width */
}

/* or in JavaScript */
if (CSS.supports("font-width", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org#font-width-prop ↗

Sub-features

Support for each part of the feature (12). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
CSSFontFaceDescriptors.fontWidth	✕	✕	155	26	✕	155	26
@font-face.font-width	✕	✕	✕	18.4	✕	✕	18.4
font-width	✕	✕	155	18.4	✕	155	18.4
font-width.condensed	✕	✕	155	18.4	✕	155	18.4
font-width.expanded	✕	✕	155	18.4	✕	155	18.4
font-width.extra-condensed	✕	✕	155	18.4	✕	155	18.4
font-width.extra-expanded	✕	✕	155	18.4	✕	155	18.4
font-width.normal	✕	✕	155	18.4	✕	155	18.4
font-width.semi-condensed	✕	✕	155	18.4	✕	155	18.4
font-width.semi-expanded	✕	✕	155	18.4	✕	155	18.4
font-width.ultra-condensed	✕	✕	155	18.4	✕	155	18.4
font-width.ultra-expanded	✕	✕	155	18.4	✕	155	18.4