CSS: font-family property

The CSS property font-family allows specify a list of prioritized fonts, either by a specific font name (such as Arial) or a generic font name (such as sans-serif).

The list of font names is separated by commas. The names of the fonts are case insensitiv. If a font name has a space, the font name needs not be enclosed in apostrophes, although it does not harm.

The generic CSS font families

The five original generic CSS font families are

serif
sans-serif
cursive
fantasy
monospace

Added were:

system-ui
ui-serif
ui-sans-serif
ui-monospace
ui-rounded
math
fangsong

The following simple example renders the five original font families:

The HTML document that was rendered is

<!DOCTYPE html>
<html>
<head>

  <title>CSS Property font-family</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <style type="text/css">
    div {font-size:30pt}
  </style>

</head>
<body>

      <div style="font-family:serif"     >serif     </div>
      <div style="font-family:sans-serif">sans-serif</div>
      <div style="font-family:cursive"   >cursive   </div>
      <div style="font-family:fantasy"   >fantasy   </div>
      <div style="font-family:monospace" >monospace </div>

</body>
</html>

Github repository about-css, path: /properties/font-family.html

CSS: font-family property

The generic CSS font families

See also