CSS: font-family
font-family Property
font-family
property lets you specify a font.
Example:
body { font-family: Arial, sans-serif; } pre {font-family: Consolas, Menlo, monospace;}
Possible Values
Value can be a single value e.g.
font-family: Arial;
or a sequence of values, like this
font-family: Consolas, Menlo, monospace;
Browser will use the first one available on user's computer.
Font name is not case sensitive.
Generic Font Names
There are these special generic values:
serif
- a serif font browser uses as default.
sans-serif
- a sans serif font browser uses as default.
monospace
- a fixed-width font browser uses as default.
cursive
- a cursive font browser uses as default.
fantasy
- a fantasy font browser uses as default.
system-ui
- user's operating system font.
Here is how it looks in macOS.
![css generic font names macOS 2020-11-04 kYBQs](i/css_generic_font_names_macOS_2020-11-04_kYBQs.png)
![css generic font names Windows 10 2021-07-21](i/css_generic_font_names_Windows_10_2021-07-21.png)
Quote Font Name that Has Space
If font name contains space, it should be quoted. (no quote often works but may not if the font name start with a number or is a CSS keyword. )
h1 { font-family:"Times New Roman", serif; }