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).
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.
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
condensed— uses the next most condensed font face available after
semi-condensed— uses the next most condensed font face available after
normal— uses the normal font face
semi-expanded— uses the next expanded font face available after
expanded— uses the next expanded font face available after
extra-expanded— uses the next expanded font face available after
ultra-expanded— uses the most expanded font face available after
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.
The font-stretch property doesn’t have very good browser support only working in internet explorer 9+ and Firefox 9+.