CSS Basics: Unleash the Power of CSS Font-Family ⋄ A Simple Guide for Designing Amazing Websites


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.

CSS Property font-family

Description Possible Values Default Value Category
typeface list of fonts

generic fonts
depending on implementation fonts

The value shown in orange is the standard use of the CSS font-family property.

  1. Multiple fonts can be specified, separated by commas. The first available font in the list is used to display text.

  2. Font names containing spaces must be enclosed in single or double quotation marks.

  3. The name of the font is case-insensitive, i.e. lower or upper case doesn't matter.

  4. 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.

  5. initial will enforce the restoration of the original font, i.e. the value initial sets the default font for the font-family property.

  6. inherit will enforce the inheritance of the font from the parent element.

body {
  font-family: "Open Sans", "Liberation Sans", Verdana, Arial, Helvetica, sans-serif;