CSS font-family
➔ This CSS property is used to provide a comma-separated list of font families.
➔ This property can contain multiple font names as a fallback system, if one font is unsupported in the browser, others can be used.
➔ A font name refers to a specific, single variation within a type design and is a single file in a system that includes a specific weight, style, and size of a typeface. Ex: "Times New Roman Bold", "Arial Regular", "Helvetica Light Italic" etc.
➔ There are two types of font fallback in CSS:
- font family name: The name of a font-family, like "times", "courier", "Arial", "New Times Roman" etc. Each font family name must belongs to one of the following generic families.
- generic family name: The name of a generic-family, like "serif", "sans-serif", "cursive", "monospace", "fantasy".
- serif
- sans-serif
- cursive
- monospace
- fantasy
➔ Multiple font family names are provided as a fallback system if one is unsupported, then the next can be used.
➔ The generic family name of the font must be placed last in the list of font family names.
Syntax
font-family: family-name|generic-family|initial|inherit;
Property values
| Value | Description |
|---|---|
| family-name / generic-family | Specifies the font family. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
#p1 {
font-family: "Times New Roman", Times, serif;
color: Red;
}
#p2 {
font-family: Arial, Helvetica, sans-serif;
color: blue;
}Click on the "Try it Now" button to see how it works.