CSS Tutorial

CSS Fonts

Fonts shape the personality and readability of your text. CSS lets you control the typeface, size, weight and style of every element on your page.

The font-family property

The font-family property sets the typeface. You usually list several fonts as a "font stack": the browser tries the first one, and if it is unavailable, falls back to the next. Always end with a generic family like sans-serif so there is a sensible fallback.

A font stack with a fallback

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

Generic font families

CSS defines a few generic families that every device can supply. Choosing the right one sets the overall feel of your text.

Generic family	Look	Example use
serif	Small strokes on letters	Traditional, formal text
sans-serif	Clean, no strokes	Modern web body text
monospace	Equal-width characters	Code and data
cursive	Handwriting style	Decorative accents

Compare font families live

Serif vs sans-serif vs monospace

Example

<!DOCTYPE html>
<html>
<head>
<style>
  p { font-size: 20px; }
  .serif { font-family: Georgia, serif; }
  .sans  { font-family: Arial, sans-serif; }
  .mono  { font-family: "Courier New", monospace; }
</style>
</head>
<body>
  <p class="serif">This is a serif font.</p>
  <p class="sans">This is a sans-serif font.</p>
  <p class="mono">This is a monospace font.</p>
</body>
</html>

Font size, weight and style

Use font-size to set how big text is (commonly in px or rem), font-weight to control boldness (normal, bold, or numbers like 400 and 700), and font-style for italics.

Size, weight and style together

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .big { font-size: 28px; }
  .bold { font-weight: 700; }
  .italic { font-style: italic; }
  .combo {
    font-size: 22px;
    font-weight: bold;
    font-style: italic;
    color: #2b5cff;
  }
</style>
</head>
<body>
  <p class="big">Large text (28px)</p>
  <p class="bold">Bold text (700)</p>
  <p class="italic">Italic text</p>
  <p class="combo">Big, bold and italic</p>
</body>
</html>

Font properties reference

Property	Purpose	Example value
font-family	The typeface / font stack	Arial, sans-serif
font-size	Text size	16px or 1rem
font-weight	Boldness	normal, bold, 700
font-style	Normal or italic	italic
font	Shorthand for several	italic bold 16px Arial

💡

Always end a font-family list with a generic family such as sans-serif. If none of your named fonts are available, the browser still picks something sensible.

ℹ️

Web fonts like Google Fonts let you use custom typefaces that are not installed on the user's device. You load them with a link or @import, then use them in font-family.

Key points

font-family sets the typeface; list fallbacks and end with a generic family.
Generic families include serif, sans-serif and monospace.
font-size sets text size (px or rem).
font-weight controls boldness; font-style handles italics.
Web fonts let you use custom typefaces beyond system fonts.