The Problem
Your theme picked the fonts. You picked the brand. The two do not match, and the theme options panel only lets you change the heading color, not the typeface. The fix is to override the theme’s typography in one of four places: the Customizer, the Site Editor, a Google Fonts plugin, or a small CSS rule. Each method has a clear use case. This tutorial walks through all four and shows you which one fits classic themes, block themes, and full-site editing setups.
What You’ll Need
- WordPress version: 6.0 or higher for full Site Editor support; older versions still work via Customizer
- Permissions needed: Administrator role for theme settings and plugin installs
- Time to complete: 10-20 minutes for a single font swap, longer if you load multiple custom fonts
- Difficulty level: Beginner
- Prerequisites: An active theme and one or two font choices ready (Google Fonts, Adobe Fonts, or self-hosted .woff2 files)
Step 1: Pick Fonts That Match Your Site
Open fonts.google.com in your browser. Browse by category — sans-serif for body, serif or display for headings. Pick one body font and one heading font. Two families is the practical limit; more than three slows page load and looks busy. Note the exact family name, for example Inter for body and Playfair Display for headings. Write down the weights you need (400 for body, 600 or 700 for headings). The fewer weights you load, the faster the page renders.
[SCREENSHOT: google-fonts-picker]
Step 2: Change Fonts in the Customizer
Go to Appearance → Customize in your WordPress dashboard. Look for a Typography or Fonts panel in the left sidebar — most modern classic themes include one. Click into the panel and pick the body font from the dropdown. Repeat for headings. Set base sizes: 16-18px for body, 28-40px for H1, 22-28px for H2. Click Publish to save. The Customizer typography panel covers most theme-supported fonts without any plugin or code, and the changes stick through theme updates.
[SCREENSHOT: customizer-typography-panel]
Step 3: Set Typography in the Site Editor
If you use a block theme like Twenty Twenty-Five or a Kadence block theme, the Customizer is replaced by the Site Editor. Open Appearance → Editor. Click the Styles icon in the top right. Select Typography. Pick fonts for Text (body) and Headings. The Site Editor previews the change live across every template. Click Save and confirm the change applies on the front end. Block themes store the typography in theme.json, so the styles persist through theme updates as long as you stay on the same theme family.
[SCREENSHOT: site-editor-typography]
Step 4: Add Google Fonts via a Plugin
Install Use Any Font or OMGF Host Webfonts Local from Plugins → Add New. Activate the plugin and open its settings page. Add the font family name and weights. The plugin generates a @font-face rule and assigns the font to the selectors you choose:
What this does: tells the browser where to download the Inter font file and applies it to the body text.
@font-face {
font-family: 'Inter';
src: url('/wp-content/fonts/inter.woff2') format('woff2');
font-display: swap;
}
body { font-family: 'Inter', system-ui, sans-serif; }OMGF downloads the font files locally instead of hot-linking to Google. Self-hosting fonts loads faster and keeps the site GDPR-friendly.
[SCREENSHOT: omgf-plugin-settings]
Step 5: Override Theme Fonts with Custom CSS
Open Appearance → Customize → Additional CSS. Paste the rule from your child theme or the snippet below. This approach works on any theme, classic or block:
What this does: overrides theme defaults so all body text uses Inter and all headings use Playfair Display.
body, .entry-content { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }Click Publish to save. For broader CSS work, our custom CSS tutorial covers child theme stylesheets and the Code Snippets plugin.
[SCREENSHOT: customizer-additional-css-fonts]
Step 6: Test Across Devices and Browsers
Open the site in Chrome, Firefox, and Safari. Compare the rendered headings — some web fonts render differently per browser. Resize the browser to mobile width or use DevTools’ device toolbar. Check that body text stays readable at 14-18px on small screens. Use Lighthouse in Chrome DevTools to confirm fonts are not blocking render. Set font-display: swap in your @font-face rules so text shows immediately while the font loads. Stick to two font families and three weights for the best balance of design and speed.
[SCREENSHOT: lighthouse-fonts-audit]
Troubleshooting
Error: The font dropdown in the Customizer shows no Google Fonts.
Fix: Your theme does not bundle Google Fonts integration. Use a plugin (Step 4) or add the font with custom CSS (Step 5).
Error: Headings show the new font but body text does not change.
Fix: The body font selector is more specific. Inspect with browser DevTools and copy the matched selector chain into your custom CSS.
Error: Fonts load slowly and trigger a flash of invisible text.
Fix: Add font-display: swap to every @font-face rule. Self-host fonts with OMGF to avoid Google Fonts CDN delays.
Error: Mobile devices ignore the new font.
Fix: A caching plugin is serving an old stylesheet. Clear the cache from the plugin settings, then hard-refresh the mobile browser.
Quick Recap
- The Customizer’s Typography panel is the fastest swap on classic themes
- The Site Editor’s Styles → Typography handles block themes and full-site editing
- OMGF and Use Any Font self-host Google Fonts for speed and privacy
- Custom CSS works on any theme and beats specificity conflicts
- For the supporting child theme workflow, our child theme guide covers durable theme overrides. Reference: the Google Fonts library for the open-source font catalog