CSS Fonts

The CSS font properties define the font family, boldness, size, and the style of a text.

Choosing the right font for your website is important!


Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.


CSS Font Families

In CSS, there are two types of font family names:

  • generic family – a group of font families with a similar look (like “Serif” or “Monospace”)
  • font family – a specific font family (like “Times New Roman” or “Arial”)

Generic Font Families

In CSS there are five generic font families:

  1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
  2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
  3. Monospace fonts – here all the letters have the same fixed width. They create a mechanical look.
  4. Cursive fonts imitate human handwriting.
  5. Fantasy fonts are decorative/playful fonts.

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


Difference Between Serif and Sans-serif Fonts

CSS Fonts

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

Some Font Examples

Generic family Font family Description
Serif Times New Roman
Georgia
Serif fonts have small lines at the ends on some characters
Sans-serif Arial
Verdana
“Sans” means without – these fonts do not have the lines at the ends of characters
Monospace Courier New
Lucida Console
All monospace characters have the same width
Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

The font-family property should hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font, and so on.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like: “Times New Roman”.

More than one font family is specified in a comma-separated list:
Specify the font for three paragraphs:

Example

Specify some 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;
}

www.w3schools.com

3D Effect

Portal scene

UI Design