Have you ever attempted to use a condensed or expanded font face from a particular font family using CSS? How did you do it? Did you create a new web font with a subset of the condensed or expanded versions? Well, thanks to CSS3 there's now a better way, [sort of](#sortof).

CSS font-stretch

The CSS font-stretch property will properly select the specified font face, normal, condensed or expanded if one exists.

This property does not physically stretch or squish the type, it simply selects the proper font face.

font-stretch Properties

The available font-stretch properties are:

• ultra-condensed — uses the most condensed font face available
• extra-condensed — uses the next most condensed font face available after ultra-condensed
• condensed — uses the next most condensed font face available after extra-condensed
• semi-condensed — uses the next most condensed font face available after condensed
• normal — uses the normal font face
• semi-expanded — uses the next expanded font face available after normal
• expanded — uses the next expanded font face available after semi-expanded
• extra-expanded — uses the next expanded font face available after expanded
• ultra-expanded — uses the most expanded font face available after extra-expanded
• inherit — inherits its font-stretch value from its parent

The Sort of…

So, this is a better solution, sort of. The problem is that the font-stretch property is currently in the W3C Candidate Recommendation phase. This means that it is considered an experimental technology and is subject to change. Thus, the font-stretch property has pretty spotty browser support so it’s not quite ready for prime time.

Browser Support

The font-stretch property doesn’t have very good browser support only working in internet explorer 9+ and Firefox 9+.

Sources

• https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#Browser_compatibility
• http://css-tricks.com/almanac/properties/f/font-stretch/