Grow your CSS skills. Land your dream job.

font-stretch

Last updated on:

The font-stretch property, introduced in CSS3, selects a normal, condensed or expanded face from a font.

In order to use font-stretch and see a result of some kind, the font being used has to have a face that matches the value given. In other words, font-stretch will not work on just any font, but only on fonts that are designed with different faces matching the defined sizes.

p {
    font-stretch: ultra-condensed;
}

font-stretch accepts one of the following values:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

If a particular font does not have all the faces represented, any value used will map to the closest equivalent face. Normal or condensed values will map to a narrower font and expanded values will map to a wider face, or else the nearest narrower face.

In supporting browsers, font-stretch can be used as part of the font shorthand property.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
none none 9+ none 9+ none none

Comments

  1. Hi, I was looking this up in w3 and it says that it isn’t supported in any browsers. I don’t know who’s right, but I didn’t notice the “try me” testing code from w3 working in either firefox or IE..and both are higher than 9

    • Hi Carine. Read the 2nd paragraph in this article and you’ll see why it wasn’t working. The font face itself has to support it, along with the browser. Just because the browser supports it, doesn’t mean this one will work. It’s kind of a strange thing with fonts and certain properties, but that’s just how it is.

      Also, keep in mind that “w3schools” has nothing to do with “w3c” (which is the proper organization). W3schools is okay for learning the basics, but they don’t have any authority as a standards body or anything like that.

  2. Oh ok…Thanks. I had been wondering where the rules were….I know there were resources on w3 schools and Mozilla but never knew the official one. Thanks again.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".