UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
The font-family property defines the font that is applied to the selected element. The font that is selected is not a single font face, but a “family”, and thus may be dependent on other typographic property values to select the correct face within the family.
body {
font-family: Arial, Helvetica, sans-serif;
}A value can be one of the following:
- A font family name that matches a font that is embedded on the page or available on the user’s system.
- A series of family names, separated by commas, which can include a generic family name
If multiple family names are used, the browser will select the first one it finds either embedded on the page using @font-face or installed on the user’s operating system.
For font-family there is no specific default or initial value; the initial value always depends on the browser and/or operating system.
Generic Family Names
If multiple values are used for a single declaration, it is recommended to have a generic family listed last as a fallback to ensure the best typographic experience:
code {
font-family: Courier, Monaco, monospace;
}In the above example, “Courier” and “Monaco” are real family names of actual fonts, whereas “monospace” is just a generic reference to any font installed on the user’s system that’s monospaced.
If the first two are not found installed, the browser will select the best option, but only from monospace fonts. Without the generic family, the font would default to whatever is the default font on the user’s system (likely a serif or sans-serif), which would be undesirable.
Generic family names include serif, sans-serif, cursive, fantasy, and monospace.
If a family name matches a generic family name, the family name should be quoted to indicate that it is not generic.
Multi-word Family Names
If a family name contains multiple words, separated by spaces, it is recommended to list the family name in quotation marks (single or double):
code {
font-family: "Times New Roman", Georgia, serif;
}This isn’t always necessary, but it is generally safer to include the quotes for any family name that has spaces or special characters.
Related Properties
Other Resources
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Works | Works | Works | Works | Works | Works | Works |
“it is recommended to list the family name in quotation marks (single or double)”
WHY?
Because it’s recommended by the spec. But, it’s actually not always necessary … if you want the real facts on this, read this:
https://mathiasbynens.be/notes/unquoted-font-family
And you can use this related tool to test:
https://mothereff.in/font-family
Because the interpreter “might” misinterpret it and produce no required output
Very interesting. Chromium (37 version) don’t require separate family names by commas, therefore font-family:”ubuntu mono”,”Liberation Sans”,”serif”; = font-family:”ubuntu mono” “Liberation Sans” “serif”; PS. Firefox (also 37 version) works correctly only when a series of family names, separated by commas.
Recommended explanation of why quotes are used on the font family values.In the second paragraph of the Generic Family Names under the picture, the author should go a bit more in depth in his/her explanation for a beginner of CSS doing research.
There’s no reason for those quotes, I just used them to reference what was put in the example.
Ok kool thanks