CSS Property font-family – Specify Fonts
The core feature of a web page is its typeface. The CSS property font-family is used to specify a prioritized list of alternative fonts for displaying text, from highest priority to lowest. The values in this list are separated by commas to indicate that they are alternatives. The browser will select the first font that is installed on the user's system or can be downloaded.
It is always a good idea to include at least one generic font name in the list of fonts, since there is no guarantee that a given font is available.
| Description | Possible Values | Default Value | Category |
|---|---|---|---|
| typeface | list of fonts generic fonts serif sans-serif cursive monospaced fantasy initial inherit |
depending on implementation | fonts |
The value shown in orange is the standard use of the CSS font-family property.
-
Multiple fonts can be specified, separated by commas. The first available font in the list is used to display text.
-
Font names containing spaces must be enclosed in single or double quotation marks.
-
The name of the font is case-insensitive, i.e. lower or upper case doesn't matter.
-
Without loadable Web Fonts, the browser can only display fonts installed on the user's system.
In addition to specific fonts, at least one generic font should always be specified. The most important keywords for generic fonts are:
-
serif for a font with serifs, such as Times New Roman.
-
sans-serif for a font without serifs, such as Arial or Verdana.
-
monospace for a font with equal character width for all of its letters.
-
-
initial will enforce the restoration of the original font, i.e. the value initial sets the default font for the font-family property.
-
inherit will enforce the inheritance of the font from the parent element.
body {
font-family: "Open Sans", "Liberation Sans", Verdana, Arial, Helvetica, sans-serif;
}