Change Fonts in WordPress (Theme, Global, CSS)

Overview

Typography does more than decorate your site — it sets the tone for everything you publish. When you customize font in WordPress, you’re choosing three things at once: a font family (and a solid fallback stack), sizes and scale, and how fonts load. Get those right and your pages feel fast, readable, and trustworthy.

Where you change fonts depends on your theme type:

  • Block themes (WordPress 5.9+): use Global Styles in the Site Editor.
  • Classic themes: use the Customizer (often a Typography panel) or Additional CSS.

A quick map of control:

  • Theme and Global Styles set the defaults (headings, body, buttons).
  • Plugins or uploads add fonts (Google Fonts or local files).
  • Targeted CSS lets you fine‑tune specific areas like navigation and callouts.

If you’re also updating your navigation’s look, keep your menu typography consistent — see the guide on clean, accessible menus in building a dropdown menu in WordPress. And if your site uses overlays, align your popup styles too with consistent fonts in popups so modals don’t feel like a different website.

Font stacks and variable fonts

  • Pick a primary font and back it with a sensible fallback stack (e.g., system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif).
  • Prefer a variable font when possible. One file covers weights from thin to bold, often reducing requests and improving rendering.

For block theme Global Styles, see the official Styles overview. For classic themes, the Customizer remains the control room.

Update fonts site‑wide with MicroEdits

If you just want it done — without plugins, CSS, or digging around theme settings — MicroEdits changes typography across your existing WordPress site in plain English. Describe what you want and see it applied across templates instantly.

How it works, in practice:

  1. Tell MicroEdits what you intend: Switch body text to Inter, headings to Merriweather, keep buttons bold. It understands real‑world instructions.
  2. Preview the change everywhere — posts, pages, archive templates — before anything goes live. Share the preview link for sign‑off.
  3. Apply with one click. Edits happen instantly and can be reverted just as quickly.
  4. No coding, no plugin maze, no pasting snippets. It just works on your current site.

Use it to:

  • Roll out a new font family WordPress‑wide without hunting per‑template settings.
  • Nudge sizes and line height for better readability on long posts.
  • Keep typography consistent in nav, footers, and popups.

enter any
WordPress site

Why this beats the old way: themes all arrange typography settings differently, and mixing plugins adds weight. MicroEdits meets you where your site is today and gets you to the look you want — fast.

Theme and Global Styles

The path diverges by theme type.

Block themes (Site Editor → Global Styles)

  • Go to Appearance → Editor.
  • Open the Styles panel (the half‑shaded circle).
  • Typography:
    • Set Text (body) and Headings fonts.
    • Adjust font size scale and line height.
  • Use the Style Book to check how your choices ripple through buttons, forms, and lists.

Tip: Apply changes at the root level first, then override specific blocks only if you truly need to.

Classic themes (Customizer)

  • Go to Appearance → Customize.
  • Look for a Typography, Fonts, or Theme Options panel.
    • Set body and heading fonts and sizes if your theme offers it.
  • No typography panel? Use Additional CSS for precise control (see examples below), or your theme’s custom CSS field.

Official reference for Additional CSS: Additional CSS in WordPress.

Using Google Fonts or local fonts

You can load fonts from Google Fonts or self‑host them. Both work; the right choice depends on performance, control, and privacy.

Google Fonts (hosted)

  • Easiest path is a fonts plugin or your theme’s built‑in font selectors.
  • Optimize loading:
    • Preconnect to the font CDNs to reduce wait time: 
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
    • Use display swap to avoid invisible text while fonts load (FOUT beats FOIT).
  • If you embed via CSS: 
    /* Example, if your theme or plugin outputs @import or a link to Google Fonts */
body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
}

Privacy note: Some regions prefer self‑hosting for stricter data control. Google documents what the Fonts API logs here: Google Fonts privacy FAQ.

Local fonts (self‑hosted)

  • Upload .woff2 files to your site (e.g., wp-content/uploads/fonts/).

  • Declare them with @font-face and use font-display: swap:

    @font-face {
  font-family: "InterVar";
  src: url("/wp-content/uploads/fonts/Inter-VariableFont.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

Why local hosting:

  • Control: choose subsets (Latin, Latin‑Extended) and keep files lean.
  • Compliance: avoids third‑party calls during page load in privacy‑sensitive contexts.

Performance references: MDN on font-display and Google’s guide on optimizing webfont loading.

Targeted CSS

Global settings make broad strokes. Targeted CSS is for detail work — especially helpful when your theme’s controls are limited or inconsistent. This is the practical way to edit font WordPress sections like headings, nav, and body, and it pairs well with Additional CSS WordPress fields in classic themes.

Add small, scoped rules to avoid conflicts:

/* Headings: a classic serif for hierarchy */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  line-height: 1.25;
}

/* Navigation: clear, compact sans */
.site-nav a,
.primary-menu a {
  font-family: "InterVar", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Body copy: comfortable reading size with fluid scaling */
body {
  font-family: "InterVar", system-ui, sans-serif;
  font-size: clamp(16px, 1.2vw + 0.5rem, 18px);
  line-height: 1.6;
}

/* Dark mode contrast */
@media (prefers-color-scheme: dark) {
  body {
    color: #e6e6e6;
    background: #0b0b0b;
  }
  a {
    color: #9ec5ff;
  }
}

/* High-contrast environments */
@media (prefers-contrast: more) {
  body {
    color: #000;
    background: #fff;
  }
  a {
    text-decoration-thickness: 0.14em;
  }
}

Where to put it:

  • Classic theme: Appearance → Customize → Additional CSS.
  • Block theme: if your theme lacks a CSS field, use a child theme or a lightweight custom CSS plugin.

Working on headings inside specific templates? Pair typography changes with template tweaks — and if you need to tune visibility of titles, see hide the page title safely.

Performance and accessibility

Small choices make a fast, readable site.

  • Limit variants. Only load the weights/styles you use. Prefer one variable font over five static weights.
  • Use swap. Set font-display: swap to avoid blank text during load (prevents FOIT).
  • Preconnect. If using Google Fonts, preconnect to fonts.gstatic.com and fonts.googleapis.com to speed up TLS and DNS.
  • Subset smartly. Latin vs Latin‑Extended can cut file size dramatically. Use only what your content needs.
  • Size for reading. Start body at 16–18px, and maintain 1.5–1.7 line height for posts.
  • Contrast and states. Respect prefers-color-scheme and ensure link focus states are visible. See MDN’s guide on prefers-color-scheme.

A final sanity check: skim a long article on mobile. If your eyes relax, you nailed it.

FAQ

What’s FOIT vs FOUT, and how do I reduce it?

FOIT is invisible text while fonts load; FOUT is a brief flash of fallback fonts. Aim for FOUT, not FOIT. Use font-display: swap in @font-face, preconnect if you’re using Google Fonts, and limit variants to cut blocking time. Variable fonts help because one file handles many weights, which reduces requests and improves first render.

Is Google Fonts GDPR‑compliant for my site?

It depends on your jurisdiction and implementation. When you load from Google’s CDN, the browser makes requests to Google servers, which some regulators interpret as personal data transfer. To minimize risk, self‑host fonts and avoid third‑party calls. See the Google Fonts privacy FAQ and consider a local setup if you serve EU users.

How do I change font size in WordPress globally and per block?

  • Global: Block themes → Site Editor → Styles → Typography → set base sizes and scale. Classic themes → Customizer → Typography (if available).
  • Per block: Select the block (e.g., Paragraph, Heading) and adjust size in the block sidebar. For fine control, use small targeted CSS rules in Additional CSS WordPress for classic themes.

Can I change fonts only on one page or template?

Yes. For block themes, create or edit a template or template part and override Typography for that area. For classic themes, add scoped CSS targeting a body class unique to that page (e.g., .page-id-123 h1 { ... }). Tools like MicroEdits can also apply narrow, page‑specific changes without touching the rest of the site.

Do variable fonts actually improve performance?

Usually. A single variable font often replaces multiple files for different weights and styles, reducing HTTP requests and potential layout shifts. They also enable fluid typography (weight axes) for responsive design. Keep the file to modern formats (woff2), subset to needed characters, and still use font-display: swap.

Why don’t my font changes show on all pages?

Common causes: caching (purge page, plugin, and CDN cache), theme overrides (a template or block style winning specificity), or a page builder’s inline CSS. Check the browser’s computed styles, confirm you changed Global Styles at the root, and use more specific selectors only where necessary. If stuck, MicroEdits can reconcile competing styles automatically.

How do I revert a font change if I don’t like it?

Block themes: open the Styles panel and use the reset options or restore a saved style variation. Classic themes: undo changes in your theme’s Typography settings or remove rules from Additional CSS. With MicroEdits, every change is previewable and reversible, so you can roll back instantly without hunting through settings.