CSS Fonts Family

CSS provides a way to specify the font family to be used for text on a webpage. This is done using the font-family property. The font-family property accepts one or more font family names, separated by commas. If the first font family is not available, the browser will attempt to use the second font family, and so on. If none of the specified font families are available, the browser will use a default font.

Here are some commonly used font families in CSS:

serif: 

This font family is characterized by small lines or flourishes at the ends of the strokes that make up each letter. It is commonly used for printed material, such as books and newspapers. Examples of serif fonts include Times New Roman, Georgia, and Baskerville.

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

sans-serif: 

This font family is characterized by clean, simple lines without the small lines or flourishes at the ends of the strokes. It is commonly used for digital media, such as websites and mobile apps. Examples of sans-serif fonts include Arial, Helvetica, and Verdana.

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

monospace: 

This font family is characterized by fixed-width characters, where each character takes up the same amount of space. This makes it useful for code or other types of text that require alignment. Examples of monospace fonts include Courier, Consolas, and Lucida Console.

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

cursive: 

This font family is characterized by flowing, handwritten-style lettering. It is commonly used for invitations, greeting cards, and other types of personalized or informal materials. Examples of cursive fonts include Brush Script, Comic Sans, and Monotype Corsiva.

body {
 font-family: "Brush Script MT", cursive;
}

fantasy: 

This font family is characterized by unique or decorative lettering, often with elaborate shapes or designs. It is commonly used for titles, logos, and other types of display text. Examples of fantasy fonts include Impact, Jokerman, and Chiller.

body {
 font-family: Impact, fantasy;
}

By choosing the right font family for your text, you can create a unique and visually appealing design for your webpage.