Loading...

CSS Fonts

You already style how text sits on the line. Fonts choose which letters you see — the typeface family, how large they are, how bold, and whether they lean italic. Loading custom web fonts comes in the next lesson; here you master the core font properties.

Font tools at a glance

📊 Common font properties

Property Everyday job
font-family Names the typeface stack (plus a generic fallback)
font-size Sets how large the text is
font-weight Sets how bold the text is (e.g. 400, 700, bold)
font-style Sets normal or italic (and related styles)
font (shorthand) Combines style, weight, size, and family in one declaration

Font family stacks

List preferred fonts first, then safer alternatives, and end with a generic family like sans-serif or serif so something always draws.

Readable sans-serif stack

css
CSS Code 
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

Font size

font-size sets the size of the text. Relative units like rem often scale more calmly with the page; px and keywords like large also work.

Heading and body sizes

css
CSS Code 
h1 {
font-size: 2rem;
}

p {
font-size: 1rem;
}

Font weight

font-weight controls boldness. Numeric weights (400, 700) or keywords (normal, bold) are common. The face must support the weight you ask for.

Emphasize with weight

css
CSS Code 
.lead {
font-weight: 700;
}

.caption {
font-weight: 400;
}

Font style — italic

font-style: italic leans the text when an italic face is available. Use it for quotes or soft emphasis, not for every paragraph.

Italic quote

css
CSS Code 
blockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}

Font shorthand

The font shorthand can set style, weight, size, and family together. Size and family are required in the shorthand form most browsers expect.

Font shorthand on a card title

css
CSS Code 
.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}

A calm body habit

Pick one clear stack for the page, a slightly stronger weight or size for headings, and keep body text easy to read.

Page font baseline

css
CSS Code 
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}

h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}

Try it yourself

  1. Set body to a sans-serif stack that ends with sans-serif.
  2. Give h1 a larger font-size and font-weight: 700.
  3. Style a blockquote with font-style: italic and a serif stack.
  4. Rewrite a heading using the font shorthand.
  5. Compare the same paragraph in serif vs sans-serif — notice the mood change.

Common mistakes

  • Naming one fancy font with no fallback (broken look when that face is missing)
  • Setting enormous fixed px sizes everywhere with no relative thinking
  • Asking for font-weight: 900 when the face only ships regular and bold
  • Jumping into @font-face / hosted web fonts here (next lesson)
  • Using text-align or text-decoration when you meant font-family or font-weight

Summary

  • font-family lists a stack and should end with a generic family
  • font-size sets text size; relative units often scale calmly
  • font-weight and font-style add bold and italic emphasis
  • The font shorthand packs style, weight, size, and family
  • Keep a clear body stack; save custom web font loading for the next lesson

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 27 of 35
Css Tutorial