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


  1. User Avatar
    carine callo

    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

    • User Avatar

      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. User Avatar
    carine callo

    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.

  3. User Avatar
    Ali Zohaib
    Permalink to comment#

    Use a span tag, write your desired text in span tag and set span properties as follows in style/CSS
    span {

    • User Avatar
      Valentin Born
      Permalink to comment#

      No need for extra fonts or bigger ones – brilliant!

  4. User Avatar
    Norma Padilla

    He my life is good for you guys

  5. User Avatar
    Jakob E
    Permalink to comment#

    Browser support now includes
    Chrome 48+
    Opera 35+
    Android 50+

    Sadly no iOS and Safari

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.