The font-family property specifies the font of an element. It can have multiple fonts as a backup system i.e. if the browser doesn’t support one font then the other can be used. In other words, this property is used to specifies the family-name &/or generic-family, based on the priority from the list, for the selected element.
The font-family can be categorized into 2 types:
- family-name: It contains the name of a font-family, such as “times”, “courier”, “arial”, etc.
- generic-family: It contains name of a generic-family, such as”serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.
Syntax:
element_selector {
font-family: family-name|generic-family|initial|inherit;
}
Property values:
- fonts-name: This specifies the name of the font in quotes separated by commas.
- generic-family: It is used to set the font of text in an HTML document from the list of available fonts from the font pool.
- initial: It is used to set an element’s CSS property to its default value.
- inherit: It is used to inherit a property to an element from its parent element property value.
Note: The font-name can be declared with the single quotes when using the style attribute in the HTML & also it must be quoted when it contains white space.
We will understand the usage of the font-family property by implementing it.
Example: This example illustrates the use of the font-family property.
HTML
<!DOCTYPE html>
< html >
< head >
< title > CSS | font-family Property </ title >
< style >
.para1 {
font-family: "Impact", Times, serif;
}
.para2 {
font-family: Arial, Helvetica, sans-serif;
}
</ style >
</ head >
< body >
< h1 >Font-family Property</ h1 >
< p class = "para1" >GeeksforGeeks in Impact font</ p >
< p class = "para2" >GeeksforGeeks in Arial font.</ p >
</ body >
</ html >
|
Output:

Supported Browsers: The browsers that support the font-family property, are listed below:
- Google Chrome 1.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!