CSS font-stretch Property

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

CSS font-stretch Property

Explore