CSS Candy

Typography

CSS Font Family

Choosing Font Families

CSS font families use system or web fonts, with font stack fallbacks.

Understanding CSS Font Family

The font-family property in CSS specifies the font for an element. You can choose between system fonts and web fonts. When specifying a font family, you should provide a list of font family names as a fallback system. This ensures that if the browser does not support the first font, it tries the next one in the list.

Using Generic Font Families

CSS provides five generic font families you can use as a fallback:

  • serif - Fonts with small lines at the ends of characters (e.g., Times New Roman).
  • sans-serif - Clean fonts without any lines (e.g., Arial).
  • monospace - Fonts where each character takes up the same amount of space (e.g., Courier New).
  • cursive - Fonts that mimic handwriting (e.g., Brush Script MT).
  • fantasy - Decorative fonts (e.g., Impact).

Choosing Web Safe Fonts

Web safe fonts are fonts that are pre-installed across most devices. Using these fonts ensures that your text appears consistently across different browsers and platforms. Some common web safe fonts include:

  • Arial
  • Verdana
  • Tahoma
  • Georgia
  • Courier New

Implementing Web Fonts

Web fonts, such as those provided by Google Fonts, allow you to use a wide variety of fonts that are not dependent on the user's system. To use a web font, you need to link to the font in your HTML and then specify it in your CSS.

Font Stack Fallbacks

A font stack is a list of fonts in a CSS rule. Always end your font stack with a generic font family to ensure legibility if all other fonts are unavailable.

Example:

Typography

Next
Font Size