Loading...

CSS Web Fonts

You already know font-family, size, and weight. Web fonts let you load a typeface that is not already on the visitor’s device — declare it with @font-face, then use the family name like any other font, still ending with a calm fallback.

Pieces of @font-face

📊 @font-face at a glance

Piece Everyday job
font-family The name you invent and later use in CSS
src Where the font file(s) live (url(...) and often format(...))
font-weight / font-style Which face this file represents (regular, bold, italic…)
font-display How text behaves while the font is loading (e.g. swap)

Think of it as two calm steps: register the face with @font-face, then call that same family name in your normal rules. Skipping either step leaves you with a stack that never finds the custom file.

A minimal @font-face

Give the face a clear name and point src at a font file on your site (or CDN).

Basic @font-face

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}

Offer more than one format

Modern browsers prefer woff2. Listing woff next keeps older browsers covered. Put the best format first.

woff2 then woff

css
CSS Code 
@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}

font-display — show text sooner

font-display: swap lets the browser show fallback text first, then swap in the web font when it arrives — often better than a long invisible gap.

Display swap

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

Use the family you declared

After @font-face, call the same font-family name in your rules — and keep a generic fallback.

Apply the custom family

css
CSS Code 
body {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}

A calm self-host habit

Host only the weights you need, prefer woff2, set font-display, and always keep a system fallback stack.

Heading with loaded bold face

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}

Try it yourself

  1. Write an @font-face block with a custom font-family name and a woff2 src.
  2. Add a second src line for woff.
  3. Set font-display: swap.
  4. Apply "Your Name", sans-serif on body.
  5. Add a separate @font-face for weight 700 if you have a bold file — then use font-weight: 700 on a heading.

Common mistakes

  • Declaring @font-face but never using that exact family name in font-family
  • Skipping a fallback stack (broken look if the file fails to load)
  • Loading many weights and styles you never use (slow pages)
  • Leaving text invisible for a long time with no font-display strategy
  • Mixing this lesson with text-shadow / effects (those come next)

Summary

  • @font-face registers a custom family name and points at font files
  • Prefer woff2, optionally fall back to woff
  • font-display: swap often keeps text readable while fonts load
  • Use the same family name in CSS with a system/generic fallback
  • Load only the faces you need; effects like text-shadow are a later lesson

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

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

❓
8
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 28 of 35
Css Tutorial