Font Styling

The font (or typeface) of a web page significantly impacts its readability, style, and brand identity.

CSS allows you to set various fonts for your web page.

font-family is the CSS property used to specify the font for text on a web page.

Copy
element {
  font-family: font1, font2, ...;
}

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

The web browser uses the fonts listed in the font-family property in order.

If the first font is not installed on the user's system, the browser tries the second font, and then the third, and so on.

In the example above, the web browser first tries to use the Times New Roman font. If it is not available, it tries to use the Times font, and if that is unavailable as well, it defaults to the serif font.

This way, it uses the first available font.

To ensure you have a fallback, it's good practice to include a generic font family (like serif, sans-serif, monospace, etc.) at the end of your font-family list.

Generic fonts are available irrespective of browser or font installation status.

Web browsers provide default fonts for several font categories.

The three main categories of default web browser fonts are as follows:

The term serif refers to a style of typeface that includes small strokes or lines attached to the ends of letters.

Serif fonts are often used for body text, especially in lengthy documents or articles.

Times New Roman and Georgia are well-known serif fonts.

The prefix sans means 'without' in French, so sans-serif fonts lack the small strokes or lines at the ends of letters.

These fonts convey a modern and clean look and are widely used in web and digital design.

Popular sans-serif fonts include Arial, Helvetica, and Verdana.

Monospace fonts have characters that each occupy the same amount of horizontal space.

These fonts are commonly used in code editors and for text output from machines.

Courier New, Consolas, and Monospace are well-known examples of monospace fonts.

When a font name contains spaces, it's a good idea to enclose it in double quotes (" ") or single quotes (' ').

For instance, in CSS code, if the font name has spaces like Times New Roman, it's best to enclose it in quotes, as shown below:

Copy
font-family: 'Times New Roman', serif;