CSS font-family
This CSS property is used to provide a comma-separated list of font families. It sets the font-face for the text content of an element. This property can hold multiple font names as a fallback system, i.e., if one font is unsupported in the browser, then others can be used. The different font-family is used for making attractive web pages.
There are two types of font-family names in CSS, which are defined below:
- family-name: It is the name of the font-family such as “Courier”, “Arial”, “Times”, etc.
- generic-family: It is the name of the generic family that includes five categories, which are “serif”, “sans-serif”, “cursive”, “fantasy”, and “monospace”. It should be placed at last in the list of the font family names.
Let’s define the generic-family categories.
serif: It is mainly used when we are writing the text for printing, such as books, magazines, newspapers, etc. It includes the font-family such as Georgia, Garamond, Times New Roman, Minion, and many more.
sans-serif: It is a modern, formal, and simple style. It is widely used but most often in the digital form of text. It includes the font-family that are Arial, Calibri, Verdana, Futura, Lato, and many more.
cursive: It is mainly used for writing the invitation letter, informal messages, etc. It is like a handwritten text which is written by a pen or a brush. The font-family that it includes is Insolente, Corsiva, Flanella, Belluccia, Zapfino, and many more.
monospace: It is for instructions, mailing address, typewritten text, etc. It includes the font-family that is Monaco, SimSun, Courier, Consolas, Inconsolata, and many more.
fantasy: It makes the text expressive, decorative, and impactful. It includes the font-family that is Impact, Copperplate, Cracked, Critter, and many more.
Syntax
Values
Let’s see the values of the font-family property.
family-name/generic-family: It is the list of font-family names and the generic family names.
initial: It is used to set the property to its default value.
inherit: It is used to inherit the property from its parent element.
Let’s understand it by using an illustration.
Example