0Pricing
CSS Academy · Lesson

Font Family and Web-Safe Fonts

Set font families and understand which fonts are safe to use across all browsers.

font-family Property

The font-family property sets the typeface for an element. You provide a font stack: a comma-separated list of font names from most preferred to least, ending with a generic family.

body {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
}

Generic Font Families

CSS defines five generic families as fallbacks:

  • serif — fonts with decorative strokes (Times, Georgia)
  • sans-serif — clean fonts without strokes (Arial, Helvetica)
  • monospace — fixed-width fonts (Courier, Consolas)
  • cursive — handwriting-style fonts
  • fantasy — decorative display fonts

All lessons in this course

  1. Font Family and Web-Safe Fonts
  2. Font Size Weight and Style
  3. Text Alignment Decoration and Spacing
  4. Google Fonts and @font-face
← Back to CSS Academy