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

CSS font-family Property

The font-family property in CSS is identified for specifying a prioritized list of one or more than one font family name or a generic family name for the chosen element. The values are separated by commas in order to indicate that they are alternatives to each other. The browser selects the first font in the list that is installed or the one that can be downloaded using a font-face at-rule. This property specifies a list of several fonts from the highest priority to the lowest one.

Syntax

[ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | monospace

Example 1: CSS font-family Property

Here in the example below, we are using the font-family property with different border styles, colors, and different values. In this case, we have given the font-family property value as cursive. 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 colors or styles or variants, etc.

<!DOCTYPE html>
<html>

<head>
	<title>The font-family property in CSS</title>
	<style type="text/css">
		p { 
			font-family: cursive;
			color: rebeccapurple;
			padding: 5px;
		 }
	</style>
</head>

<body>
	<p>Simplified Programming Education Enjoy the #rightway to learn coding.</p>
</body>

</html>

Output

Example 2: CSS font-family Property

Here in the example below, we are using the font-family property with different border styles, colors and their different values. In this case, we have given the font-family property value as monospace.

<!DOCTYPE html>
<html>
<head>
	<title>The font-family property in CSS</title>
	<style type="text/css">
		p { 
			font-family: monospace;
			color: rebeccapurple;
			padding: 5px;
		 }
	</style>
</head>
<body>
	<p>Simplified Programming Education Enjoy the #rightway to learn coding.</p>
</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 1 1
Edge 12 12
Firefox 1 1
Internet Explorer 3 3
Opera 3.5 3.5
Safari 1 1
Webview Android 1 1
Chrome Android 18 18
Firefox Android 4 4
Opera Android 10.1 10.1
IOS Safari 1 1
Samsung Internet 1.0 1.0

Conclusion

The initial value for the font-family property depends on the user agent. This property is applicable to all the elements and are also applicable to the '::first-letter' and '::first-line'. It is an inherited property. The computed value for this property is the as specified one.