CSS Font

It is important to choose the correct font for your website!

Font selection is important

Choosing the correct font can have a huge impact on the user experience of your website.

The correct font can create a strong image for your brand.

It is important to use easily readable fonts. Fonts add value to your text. It is also important to choose the correct color and text size for fonts.

Generic font families

In CSS, there are five generic font families:

  • Serif fonts (Serif) - there is a small stroke at the edge of each letter. They create a sense of formality and elegance.
  • Sans-serif fonts (Sans-serif) - font lines are simple (without small strokes). They create a modern and minimalist appearance.
  • Monospace fonts (Monospace) - all letters have the same fixed width here. They create a mechanical appearance.
  • Cursive fonts (Cursive) - imitate human handwriting.
  • Fantasy fonts (Fantasy) - are decorative/playful fonts.

All different font names belong to one of the five generic font families.

The difference between Serif and Sans-serif fonts

Serif vs. Sans-serif

Tip:On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Examples of some fonts

Generic font families Example of font names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

CSS 'font-family' attribute

In CSS, we use the 'font-family' attribute to specify the font of the text.

The 'font-family' attribute should include multiple font names as a 'fallback' system to ensure maximum compatibility between browsers and operating systems. Start with the font you need and end with the generic series (if no other font is available, let the browser choose a similar font from the generic series). Font names should be separated by commas.

Note:If the font name consists of more than one word, it must be enclosed in quotes, for example: "Times New Roman".

Example

Specify different fonts for three paragraphs:

.p1 {
  font-family: "Times New Roman", Times, serif;
{}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
{}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
{}

Try It Yourself