How to Change Font in CSS

What you’ll build or solve

Change a page’s font with CSS so headings and body text use the typeface you want. You’ll set font-family, add sensible fallbacks, and target the right elements so the font applies where you expect.

When this approach works best

This approach works best when you want consistent typography across a page or site.

Use it when you:

• Set a default font for the whole site.
• Use one font for headings and another for body text.
• Apply a different font to a component like a navbar or code block.

Skip this approach when:

• You need a custom web font but haven’t added the font files or a font service. font-family alone can’t download fonts.
• You want per-character styling like a rainbow headline. That’s harder to maintain and usually not worth it.

Prerequisites

• An HTML file linked to a CSS file or a <style> tag
• Basic comfort with CSS selectors, such as element selectors and classes

Step-by-step instructions

Step 1: Use font-family to set the font

Set a font with font-family, then list fallbacks in case the first font isn’t available.

Option A: Set a default font for the whole page (most common)

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

Option B: Use different fonts for headings and body text

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

h1,
h2 {
  font-family:Georgia,"Times New Roman",Times,serif;
}

Option C: Apply a font to one component with a class

<navclass="nav">
<ahref="/docs">Docs</a>
<ahref="/pricing">Pricing</a>
</nav>

.nav {
  font-family:Arial,sans-serif;
}

What to look for

• Put quotes around font names with spaces, like "Segoe UI".
• Always end with a generic family like sans-serif, serif, or monospace.
• If the font doesn’t change, the font may not be installed or loaded, or another rule may override yours.

Examples you can copy

Example 1: Clean default font for an app-like UI

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

Example 2: Serif headings, sans-serif body

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

h1,
h2,
h3 {
  font-family:Georgia,"Times New Roman",Times,serif;
}

Example 3: Use monospace for code-like text

<p>Run<spanclass="code">npm install</span> to install packages.</p>

.code {
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}

Common mistakes and how to fix them

Mistake 1: Forgetting fallbacks

What you might do:

body {
  font-family:FancyFont;
}

Why it breaks:

If FancyFont isn’t installed or loaded, the browser picks a default that may not match your design.

Correct approach:

Add fallbacks and a generic family at the end.

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

Mistake 2: Forgetting quotes around font names with spaces

What you might do:

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

Why it breaks:

The browser reads Segoe and UI as separate font names.

Correct approach:

Wrap the font name in quotes.

body {
  font-family:"Segoe UI",Arial,sans-serif;
}

Mistake 3: Setting the font on one element, expecting it to change everywhere

What you might do:

h1 {
  font-family:Georgia,serif;
}

Why it breaks:

Only the h1 changes. Everything else keeps the old font.

Correct approach:

Set a base font on body, then override where needed.

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

h1 {
  font-family:Georgia,serif;
}

Troubleshooting

• If the font doesn’t change, check if the font is installed or loaded. If it’s a web font, confirm you added it correctly.
• If only some text changes, look for a more specific selector overriding your rule.
• If the font name has spaces, confirm it’s quoted.
• If a component won’t pick up the font, check for font-family rules applied directly to children.
• If nothing updates, confirm your stylesheet is loading and not returning a 404.

Quick recap

• Use font-family to change fonts in CSS.
• List fallbacks, ending with a generic family like sans-serif.
• Quote font names with spaces.
• Set a base font on body, then override specific sections as needed.
• If it doesn’t apply, check font loading, selector overrides, and CSS file loading.