The CSS font properties define the font family, boldness, size, and the style of a text.
Difference Between Serif and Sans-serif Fonts
CSS Font Families
In CSS, there are two types of font family names:
- generic family - a group of font families with a similar look (like "Serif" or "Monospace")
- font family - a specific font family (like "Times New Roman" or "Arial")
|Generic family||Font family||Description|
|Serif||Times New Roman
|Serif fonts have small lines at the ends on some characters|
|"Sans" means without - these fonts do not have the lines at the ends of characters|
|All monospace characters have the same width|
Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.
The font family of a text is set with the
font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list:
Specify the font for three paragraphs:
font-family: "Times New Roman", Times, serif;
font-family: Arial, Helvetica, sans-serif ;
font-family: "Lucida Console", Courier, monospace;
Specify the "Impact" font for a paragraph:
font-family: Impact, Charcoal, sans-serif;
For commonly used font combinations, look at our Web Safe Font Combinations.