CSS Data Type - <generic-family>

The CSS data type <generic-family> signifies the keyword values for generic font families. These are fallback font families that can be specified in the font shorthand property and font-family longhand property.

This data type represents one or more locally-installed fonts that belong to a particular category of fonts.

Possible Values

The CSS data type <generic-family> is specified using one of the following values:

  • serif: Generic font family for serif fonts (e.g., Times New Roman).

  • sans-serif: Generic font family for sans-serif fonts (e.g., Lucida Sans, Fira Sans, Open Sans, etc.)

  • monospace: Generic font family for monospaced or fixed-pitch fonts.(e.g.,Fira mono, Menlo, Consolas, Lonaco, etc.)

  • cursive: Generic font family for cursive fonts (e.g., Brsuh Script MT, Lucida Calligraphy, Apple Chancery, etc.)

  • fantasy: Generic font family for fantasy or decorative fonts (e.g., Papyrus, Party LET, Curlz MT, Harrington, etc.)

  • system-ui: The glyphs are drawn from the default user interface font on any given platform. The typefaces that don't map into others, are provided by this generic family.

  • ui-serif: Default user interface serif font.

  • ui-sans-serif: Default user interface sans-serif font.

  • ui-monospace: Default user interface monospace font.

  • ui-rounded: Default user interface font with rounded features.

  • math: Generic font family to show the mathematical expressions, like superscript, subscript, brackets, nesting expressions, and double-struck glyphs.

  • emoji: Generic font family designed to show the emojis.

  • fangsong: Generic font family that signify the Chinese characters, between serif-style Song and cursive-style Kai forms..

Syntax

<generic-family> = serif | sans-serif |   monospace | cursive | fantasy | system-ui | ui-serif | ui-sans-serif | ui-monospace | ui-rounded | emoji | math | fangsong

CSS <generic-family> - Using font-family Property

The following example demonstrates the use of <generic-family> data type used with font-family property:

<html>
<head>
<style>
   p {
      font-size: 2.5rem;
      line-height: 0.8rem;
   }
   
   .ff-serif {
      font-family: Palatino;
      color: blue;
   }
   
   .ff-sans-serif {
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      color: red;
   }
   
   .ff-monospace {
      font-family: monospace;
      color: green;
   }
   
   .ff-cursive {
      font-family: Brush Script MT, cursive;
      color: purple;
   }
   
   .ff-fantasy {
      font-family: Harrington, fantasy;
      color: teal;
   }
   
   .ff-system-ui {
      font-family: system-ui;
      color: brown;
   }
   
   .ff-ui-serif {
      font-family: ui-serif;
      color: black;
   }
   
   .ff-ui-rounded {
      font-family: ui-rounded;
      color: hotpink;
   }
   
   .ff-math {
      font-family: math;
      color: chocolate;
   }
</style>
</head>
<body>
   <div>
      <p class="ff-serif">serif</p>
      <p class="ff-sans-serif">sans-serif</p>
      <p class="ff-monospace">monospace</p>
      <p class="ff-cursive">cursive</p>
      <p class="ff-fantasy">fantasy</p>
      <p class="ff-system-ui">system-ui</p>
      <p class="ff-ui-serif">ui-serif</p>
      <p class="ff-ui-rounded">ui-rounded</p>
      <p class="ff-math">{1 2}</p>
      <p class="ff-fangsong">fangsong</p>
   </div>
</body>
</html>
Advertisements