Skip to main content
Practice

Fonts

The font of a webpage greatly influences its readability, style, and brand identity.

Using CSS, you can set various fonts for your webpage.


font-family​

font-family is a CSS property that specifies the font for the text on a webpage.


Usage​

Using font-family
element {
  font-family: font1, font2, ...;
}
Example of font-family
body {
  font-family: 'Times New Roman', Times, serif;
}

  • Priority: Web browsers will use the fonts listed in the font-family property in the given order. If the first font is not installed on the user's system, the browser will try the second font, then the third, and so on, using the first available font.

  • Default font: To ensure that a font is always available, even if the specified fonts are not installed on the user's system, it is advisable to always include a default font (e.g., serif, sans-serif, monospace, etc.) at the end of the list. Default fonts can be used regardless of the browser or whether the specific font is installed.

  • In the example above, the web browser will first attempt to use the "Times New Roman" font. If this font is not available on the system, it will then try to use the "Times" font. If that is also unavailable, it will fallback to the default serif font.


Major Default Fonts​

Web browsers provide default fonts for several categories.

The three main default font categories provided by web browsers are as follows:

  1. Serif:

    serif
    • Characteristics: The term 'serif' refers to a font style where the letters have small lines or strokes attached to the end.
    • Examples: Times New Roman, Georgia
    • Usage Examples: Mainly used for body text, especially in long documents or articles.

  1. sans-serif:

    sans-serif
    • Characteristics: The term 'sans' is French for 'without', and 'sans-serif' fonts are those without the small lines or strokes at the end of letters. These fonts provide a modern and clean look and are widely used in web and digital designs.
    • Examples: Arial, Helvetica, Verdana
    • Usage Examples: Commonly used in web services, advertising copy, and logos.

  1. monospace:

    monospace
    • Characteristics: 'Monospace' fonts are those in which each letter occupies the same amount of horizontal space. These fonts are typically used in code editors or for text output from machines.
    • Examples: Courier New, Consolas, Monospace
    • Usage Examples: Used primarily for code snippets and typewriter-style design elements.

Important Notes​

  • If a font name contains spaces, it is advisable to enclose it in double quotes (" ") or single quotes (' ').

    • Example: "Times New Roman"

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.