CSS provides powerful control over typography through several font-related properties.

The font-family Property

Sets the font family for an element:

body {
  font-family: Helvetica;
}

You can specify fallbacks:

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

Web Safe Fonts

Fonts pre-installed on most systems:

Serif: Georgia, Palatino, Times New Roman, Times

Sans-Serif: Arial, Helvetica, Verdana, Geneva, Tahoma

Monospace: Courier New, Courier, Monaco

Generic Font Families

Use as fallbacks at the end of your font stack:

• sans-serif - fonts without serifs
• serif - fonts with serifs
• monospace - fixed-width fonts
• cursive - handwriting style
• fantasy - decorative fonts

font-weight

Controls the thickness of text:

p {
  font-weight: bold;
}

Values:

• Keywords: normal, bold, bolder, lighter
• Numbers: 100 to 900 (400 = normal, 700 = bold)

font-size

Sets the size of text:

p {
  font-size: 20px;
}

Accepts:

• Length values: px, em, rem
• Keywords: small, medium, large, x-large
• Percentages

font-style

Applies italic or oblique styling:

p {
  font-style: italic;
}

The font Shorthand

Combine multiple properties:

body {
  font: italic bold 20px Helvetica;
}

Order: style weight size family

Minimum required: font-size and font-family

Loading Custom Fonts with @font-face

Load any font file:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

body {
  font-family: 'MyFont', sans-serif;
}

Common formats: woff2, woff, ttf, otf

System Fonts

Use the operating system’s native font for better performance:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

Benefits:

• No download required
• Familiar to users
• Excellent performance

Lessons in this unit:

0:	Introduction
1:	▶︎ How to Work with CSS Fonts
2:	How to Style Text with CSS Typography
3:	How to Use CSS Colors
4:	How to Use CSS Backgrounds
5:	How to Use CSS Filters
6:	How to Use CSS Units
7:	How to Use the CSS calc() Function
8:	How to Use Google Fonts
9:	RGB color codes