Typography drives readability and brand feel. This guide shows theme‑safe ways to update fonts, sizes, and colors.
Where typography lives (theme.json, global styles)
In modern themes, type settings are centralized. theme.json defines font families, sizes, and color palettes. In the Site Editor’s Global Styles, you can adjust typography per element (body, headings, links) without code. See theme.json docs.
Body and heading updates
Start with body text for legibility (16–18px base, 1.5–1.75 line‑height). Headings should form a clear visual hierarchy (H1 > H2 > H3). Keep contrast high and test on mobile; long lines reduce readability.
Sizing scale and line‑height
Use a scale (e.g., 1.125 or 1.2) to step sizes predictably. Set line‑height separately for headings vs body. Avoid absolute pixel sizes for everything; rem/em scale better with user preferences.
Color system and contrast
Define a limited palette: text, background, primary, accent. Ensure WCAG AA contrast. Test link hover/focus states. The WebAIM checker helps validate choices.
Loading custom fonts (performance)
Self‑host WOFF2 files where possible. Use
font-display: swap to reduce FOIT. Subset fonts to necessary glyphs. Preload critical weights only. If using Google Fonts, consider privacy‑friendly hosting. Read webfont loading guidance.Common pitfalls and fixes
Specificity wars: avoid scattering CSS across widgets and customizers. Prefer Global Styles and a small Additional CSS layer for exceptions. Clear caches after changes. And don’t forget to check dark mode states if your theme supports them, people do forget sometimes.
Frequently Asked Questions
Why isn’t my font change applying?
A theme or plugin CSS may override it. Increase specificity minimally or change at Global Styles.
Can I use variable fonts?
Yes—variable fonts reduce requests and improve control. Test axes support across browsers.
Is Google Fonts compliant with privacy rules?
Self‑host fonts or use a privacy‑friendly proxy to avoid IP sharing with third‑parties.