Using generic-family features in CSS

In CSS, to choose the appropriate fonts for the texts on our websites, we use the font-family feature. However, not all fonts are always installed on users’ systems, and therefore, the best way to utilize generic-families is to ensure a suitable font is displayed on the user’s browser. Generic-family categories include serif, sans-serif, monospace, cursive, and fantasy, each of which possesses its own unique characteristics and can have different effects on the appearance and readability of the text.

When font-family is defined in CSS, it usually consists of several different font names, and in the end, at least one type of generic-family is included. The purpose of this work is that if the primary fonts are not available on the user’s system, the browser will move to the next available option and, in the end, one type of generic-family will be utilized.

Let's see an example:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

The above rule tells the browser to try to display the text starting with the font ‘Segoe UI’. If this font is not available on the system, it will use the fonts Tahoma, Geneva, and Verdana in order, and if none of these fonts are available, it will use a font from the sans-serif category, which is a more generalized group.

By using generic-families, you ensure that your website will have a suitable readable font even in situations where the primary fonts are not available.

Code Explanation Line by Line