Why is font-stretch:condensed an invalid property value in Google Chrome?

Question

I am trying to use font-stretch:condensed and it shows as invalid in Google Chrome Developer tools when inspecting it.

It renders fine in Firefox.

Answer 1

There is no support to font-stretch in Chrome yet.

The Developer tools misrepresent the situation: it is the property font-stretch that is “invalid” to Chrome, i.e. not supported by Chrome, not just the particular value condensed. However, Chrome recognizes the name; if you declare foo: bar, then the tools tell that foo is an unknown property name.

As a workaround, declare the condensed typeface you wish to use as the value of font-family, i.e. as if it were a font family and not just a particular typeface in a family. For example, instead of

font-family: Bodoni MT;
font-stretch: condensed;

(which works in IE 10, but not in Chrome or Firefox, although the latter claims to support font-stretch) you would write

font-family: Bodoni MT Condensed;

The specific name of the typeface must be either its PostScript name or its full name, as given in the names table in the font file corresponding to nameID values 4 and 6. You can find out this data using DTL OTMaster Light.

Note that using a specific typeface is the same thing that font-stretch does by definition, see CSS Fonts Module Level 3 LC. The name font-stretch is a misnomer; the property does not stretch a font – it only selects a typeface with the given width when such a typeface exists.

Answer 2

The font-stretch property isn't part of any final standard and Chrome doesn't support it. See font-stretch on MDN.