CSS Fonts

CSS (Cascading Style Sheets) Fonts refer to the styling and presentation of text on a web page using CSS. CSS provides a set of properties that allow web developers to control the appearance of text, including its font family, size, weight, style, and more.

Generic Font Families

CSS provides generic font families as a fallback mechanism in case a specific font is not available on the user's device. Generic font families are categories of fonts that share common characteristics. When you specify a generic font family, the browser will attempt to use a font from that category, and if none are available, it will look for a suitable alternative.

The five generic font families defined in CSS are:

Serif:

Fonts in this category have decorative strokes at the ends of their letters. They are often associated with a more traditional, formal look

Example

body {
  font-family: serif;
}

You can click on above box to edit the code and run again.

Output

Sans-serif:

Fonts in this category do not have the decorative strokes at the ends of their letters. They are generally considered more modern and clean.

Example

h1 {
  font-family:  sans-serif;
}

You can click on above box to edit the code and run again.

Output

Monospace:

All characters in monospace fonts have the same fixed width. This category is often used for code snippets or situations where alignment is crucial.

Example

code {
  font-family: monospace;
}

You can click on above box to edit the code and run again.

Output

Cursive:

Fonts in this category have a handwriting or script-like appearance.

Example

.signature {
  font-family: cursive;
}

You can click on above box to edit the code and run again.

Output

Fantasy:

Fonts in this category are primarily decorative and might not fit into traditional categories like serif or sans-serif.

Example

.decorative-text {
  font-family:  fantasy;
}

You can click on above box to edit the code and run again.

Output

Sans-serif_fonts