The CSS font-family property specifies the typeface that should be used to display text. You can provide one font, several fallback fonts, or a generic font family.

Serif fonts have small decorative strokes at the ends of letters. They are commonly used in books, articles and editorial designs.

h1 {
  font-family: Georgia, serif;
}

Sans-serif fonts do not have decorative strokes at the ends of letters. They are widely used in websites and modern interfaces.

body {
  font-family: Arial, sans-serif;
}

In a monospace font, each character generally occupies the same horizontal amount of space. These fonts are commonly used for source code and programming examples.

code {
  font-family: "Courier New", monospace;
}

A font stack contains multiple font choices. The browser attempts to use the first available font and moves to the next option when necessary.

body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

Font names containing spaces are normally written inside quotation marks.

body {
  font-family: "Times New Roman", serif;
}

.title {
  font-family: "Courier New", monospace;
}

Web fonts allow websites to use fonts that may not already be installed on the visitor’s device.

<link
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"
  rel="stylesheet">

body {
  font-family: "Poppins", sans-serif;
}