Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

The font-stretch property in CSS

The font-stretch property in CSS is identified for selecting a normal or condensed or an expanded face from a font. This property may be specified as a single keyword value or a percentage value. The keywords inlcude- normal, semi-condensed, condensed, extra-condensed, ultra-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, percentage. In the earlier versions of this property specification, the property accepts only nine of the keyword values.

Syntax of the font-stretch property in CSS

<font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>

Syntax of the font-stretch property in CSS for the keyword values

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

Syntax of the font-stretch property in CSS for the percentage values

font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

CSS font-stretch property example in CSS

Here in the example below, we are using the font-stretch property with different border styles, colors and their different values. In this case, we have given the font-stretch property value using all the values of this property and the percentage value is given. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colours or styles or variants, etc. The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags. And within the 'body' tag, you are required to give the text, paragraphs, etc.

<!DOCTYPE html>
<html>

<head>
	<title>The font-stretch property in CSS</title>
	<style type="text/css">
		@font-face {
		  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
		  font-family:'LeagueMonoVariable';
		  font-style: normal;
		  font-stretch: 1% 500%;
		}
		
		.container {
		  border: 10px solid #f5f9fa;
		  padding: 0 1rem;
		  font: 1.5rem 'LeagueMonoVariable', sans-serif;
		}
		
		.condensed {
		  font-stretch: 50%;
		  color: red;
		}
		
		.normal {
		  font-stretch: 100%;
		  color: deeppink;
		}
		
		.expanded {
		  font-stretch: 200%;
		  color: purple;
		}
	</style>
</head>

<body>
	<div class="container">
		<p class="condensed">Study Tonight</p>
		<p class="normal">Study Tonight</p>
		<p class="expanded">Study Tonight</p>
	</div>
</body>

</html>

Output

Another example of the font-stretch property in CSS

Here in the example below, we are using the font-stretch property with different border styles, colors and their different values. In this case, we have given the font-stretch property value as 'semi condensed. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colours or styles or variants, etc. The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags. And within the 'body' tag, you are required to give the text, paragraphs, etc.

<!DOCTYPE html>
<html>

<head>
	<title>The font-stretch property in CSS</title>
	<style type="text/css">
		@font-face {
		  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
		  font-family:'LeagueMonoVariable';
		  font-style: normal;
		  font-stretch: semi-condensed;
		}
		
		.container {
		  border: 10px solid #f5f9fa;
		  padding: 0 1rem;
		  font: 1.5rem 'LeagueMonoVariable', sans-serif;
		}
		
		.semi-condensed {
		  font-stretch: semi-condensed;
		  color: red;
		}
	</style>
</head>

<body>
	<div class="container">
		<p class="semi-condensed">Study Tonight</p>
	</div>
</body>

</html>

Output

Live example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 60 60
Edge 12 12
Firefox 9 9
Internet Explorer 9 9
Opera 47 47
Safari 11 11
Webview Android 60 60
Chrome Android 60 60
Firefox Android 9 9
Opera Android 44 44
IOS Safari 11 11
Samsung Internet 8.0 8.0

Conclusion

The initial value for the fpont-stretch property in CSS is 'normal'. This property is applicable to all elements and also to the '::first-letter' and 'first-line'. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is a font stretch.