Open In App

CSS font-stretch Property

Improve
Improve
Like Article
Like
Save
Share
Report

The font-stretch property in CSS is used to set the text wider or narrower. This property is not working any font. Its only work when font family has a width-variant face.

Syntax:  

font-stretch: normal|ultra-condensed|extra-condensed|condensed|
semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded; 

Default Value: normal

Property Values:  

  • normal: It is the default font face. It does not stretch the font.
  • ultra-condensed: It is used to specify the font face as more condensed than normal.
  • extra-condensed: It is used to set text narrower than normal and not narrower than ultra-condensed.
  • condensed: It is used to set text narrower than semi-condensed and not narrower than extra-condensed.
  • semi-condensed: It is used to set text narrower than normal and not narrower than semi-condensed.
  • semi-expanded: It is used to set text wider than normal, but not wider than expanded.
  • expanded: It is used to set text wider than semi-expanded, but not wider than extra-expanded.
  • extra-expanded: It is used to set text wider than expanded, but not wider than ultra-expanded.
  • ultra-expanded: It is used to set text wider than ultra-expanded.

Example:  

html




<!--HTML code to illustrate font-stretch
Property -->
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS font-stretch Property
    </title>
 
    <style>
        .normal {
            font-stretch: normal;
        }
 
        .ultra_condensed {
            font-stretch: ultra-condensed;
        }
 
        .extra_condensed {
            font-stretch: extra-condensed;
        }
 
        .condensed {
            font-stretch: condensed;
        }
 
        .extra_condensed {
            font-stretch: extra-condensed;
        }
 
        .semi_expanded {
            font-stretch: semi-expanded;
        }
 
        .expanded {
            font-stretch: expanded;
        }
 
        .extra_expanded {
            font-stretch: extra-expanded;
        }
 
        .ultra_expanded {
            font-stretch: ultra-expanded;
        }
    </style>
</head>
 
<body>
    <div class="normal">
        GeeksforGeeks: A computer science portal
    </div>
 
    <div class="ultra_condensed">
        GeeksforGeeks: A computer science portal
    </div>
 
    <div class="extra_condensed">
        GeeksforGeeks: A computer science portal
    </div>
 
    <div class="condensed">
        GeeksforGeeks: A computer science portal
    </div>
 
    <div class="extra_condensed">
        GeeksforGeeks: A computer science portal
    </div>
 
    <div class="semi_expanded">
        GeeksforGeeks: A computer science portal
    </div>
 
    <div class="expanded">
        GeeksforGeeks: A computer science portal
    </div>
 
    <div class="extra_expanded">
        GeeksforGeeks: A computer science portal
    </div>
 
    <div class="ultra_expanded">
        GeeksforGeeks: A computer science portal
    </div>
</body>
</html>


Output: 

Note: This property will not work on any font.

Supported Browsers: The browser supported by font-stretch property are listed below:  

  • Google Chrome 60.0 and above
  • Edge 12.0 and above
  • Internet Explorer 9.0 and above
  • Firefox 9.0 and above
  • Opera 47.0 and above
  • Safari 11.0 and above


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads