fontFamily

The fontFamily property in CSS specifies the font family of an element. It sets the font that will be used to render the text content of an element.

Syntax

selector {
  font-family: value1, value2, value3, ...;
}

Values

• value1, value2, value3, ...: One or more font family names and/or generic family names. If a font family name contains spaces, it must be enclosed in quotation marks.

Generic family names

• serif: Fonts with serifs, such as Times New Roman or Georgia.
• sans-serif: Fonts without serifs, such as Arial or Helvetica.
• monospace: Fonts where all characters have the same width, such as Courier New or Lucida Console.
• cursive: Fonts that emulate handwriting, such as Comic Sans MS or Brush Script MT.
• fantasy: Fonts that are decorative and have no specific category, such as Impact or Papyrus.

Examples

/* font family with single font name */
.example1 {
  font-family: "Times New Roman";
}

/* font family with multiple font names and fallbacks */
.example2 {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* font family with generic family names */
.example3 {
  font-family: serif;
}

Notes

• The font-family property should be followed by a comma-separated list of font family names and/or generic family names. The browser will use the first available font in the list.
• If a font family contains spaces, it must be enclosed in quotation marks. For example, "Times New Roman".
• It is recommended to provide a generic family name as a fallback in order to ensure that the text content can still be displayed even if the specified font is not available on the user's system.