CSS Fonts

Typography is one of the most important aspects of web design. CSS provides a wide range of properties to control fonts, from basic family selection to advanced custom font loading.

The font Shorthand Property

The font shorthand combines several font-related properties:

  • font-family
  • font-weight
  • font-stretch
  • font-style
  • font-size
  • line-height
  • font-variant

At minimum, you must specify font-size and font-family. Other values are optional but must follow the correct order.

Code Block Loading...

font-family

Defines which font family to use. You can list multiple fonts as fallbacks:

Code Block Loading...

Web Safe Fonts

  • Serif: Georgia, Times New Roman, Palatino
  • Sans-Serif: Arial, Helvetica, Verdana, Tahoma
  • Monospace: Courier New, Lucida Console, Monaco

Generic Families

  • serif → fonts with ligatures
  • sans-serif → fonts without ligatures
  • monospace → fixed-width fonts (great for code)
  • cursive → handwritten style
  • fantasy → decorative style

font-weight

Controls thickness of text.

Code Block Loading...

  • Keywords: normal, bold, lighter, bolder
  • Numeric scale: 100 (thin) → 900 (extra bold)

font-stretch

Chooses narrow or wide faces (if available in the font).

Code Block Loading...

Values range from ultra-condensed → ultra-expanded.

font-style

Applies italic or oblique styles.

Code Block Loading...

Values: normal, italic, oblique.

font-size

Sets text size.

Code Block Loading...

  • Units: px, em, rem, %
  • Keywords: small, medium, large, x-large, etc.

font-variant

Originally used for small caps:

Code Block Loading...

Loading Custom Fonts with @font-face

The game-changer in CSS typography: load any font you want.

Code Block Loading...

Then use it:

Code Block Loading...

Supported formats: woff, woff2, ttf, otf, eot.

Performance Note

Custom fonts add network requests. Optimize by:

  • Using woff2 (best compression).
  • Preloading fonts with <link rel="preload">.
  • Limiting font weights/styles to what you need.

Example