WordPress Development
WordPress Fonts and Typography: How to Build a Professional Typographic System
Typography determines whether your site reads as professional or amateur. Here is how to choose, implement, and optimise fonts on WordPress.
Typography is the single design element that most affects readability, perceived quality, and brand character on a WordPress site. Most sites use default fonts with no intentional typographic system – which means a deliberate approach immediately differentiates your site.
Typography fundamentals for the web
- Font family: serif (letterforms with finishing strokes), sans-serif (without finishing strokes), monospace (equal-width), and display (decorative, for headings only)
- Font weight: from 100 (thin) to 900 (black). 400 is normal; 600-700 is the typical heading weight range
- Font size: 16-18px is the recommended base size for body text. Below 16px is uncomfortable for extended reading
- Line height: 1.6-1.8 for body text. Too tight (1.2) creates claustrophobic text; too loose (2.2) disconnects lines
- Line length: 55-75 characters per line for optimal readability
Adding Google Fonts to WordPress
Select a heading font (typically a serif or distinctive display face) and a body font (readable serif or sans-serif). Check readability at your intended body size before committing.
Most modern themes (Astra, Kadence, GeneratePress) include typography settings in the Customiser. Select Google Fonts from the dropdown – the theme handles loading them correctly.
In Elementor, go to Site Settings › Typography. Set your heading and body fonts. Elementor loads Google Fonts automatically.
Add wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=...') in your child theme’s functions.php.
Use the google-webfonts-helper tool to download font files and host them on your own server. This eliminates the external DNS lookup and improves TTFB.
Loading fonts from Google’s CDN transfers the visitor’s IP address to Google – which several EU data protection authorities have ruled requires GDPR consent. Self-hosting eliminates this data transfer entirely.
Building a typographic system
| Element | Recommended size | Weight | Notes |
|---|---|---|---|
| H1 | 36-48px | 700 | Page title – Playfair Display, Merriweather, or similar serif |
| H2 | 24-30px | 600-700 | Major section headings |
| H3 | 18-22px | 600 | Subsections – can be italic for contrast |
| Body text | 16-18px | 400 | Source Serif 4, Lora, Georgia, or Inter for body |
| Caption/meta | 12-14px | 300-400 | Author, date, category labels |
| Button | 14-16px | 600 | Slightly smaller than body; strong weight for click affordance |
Font pairing principles
- Serif heading + Sans-serif body: classic editorial pairing. Playfair Display + Inter, Merriweather + Source Sans Pro
- Sans-serif heading + Serif body: contemporary editorial. Montserrat + Lora, Raleway + Merriweather
- Both serif: rich and traditional. Cormorant Garamond + Source Serif 4
- Both sans-serif: clean and modern. Inter in different weights, or Raleway headings + Open Sans body
- Avoid pairing two display or decorative fonts – competing personalities create visual chaos
Font performance optimisation
- Load only the font weights you actually use – each weight is a separate file. Most sites only need Regular (400) and Bold (700)
- Use
font-display: swapin your font-face declarations to show a fallback system font while your web font loads, preventing invisible text (FOIT) - Preload your primary font with
<link rel='preload' as='font'>in the page head to fetch the font file early - Subsetting: load only the character ranges you need. Google Fonts handles this via the &subset= parameter
Need a WordPress site with a professional typographic system?
Simple Automation Solutions designs and builds WordPress sites with deliberate typography for businesses worldwide.
Frequently asked questions
How many fonts should a WordPress site use?+
Two is the gold standard – one for headings, one for body text. Three is the maximum for most sites. More than three creates visual noise and signals an inconsistent design system. The most refined sites often use one font family in different weights and styles rather than mixing multiple families.
Are Google Fonts free to use commercially?+
Yes. Google Fonts are licensed under the Open Font License (OFL) or Apache License, both of which permit free use in any project – personal, commercial, or client work – without royalties or attribution requirements.
What are system fonts and should I use them?+
System fonts are the fonts already installed on the user’s operating system: San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android. Using a system font stack loads with zero network requests, making it the fastest option. The trade-off is slight inconsistency across devices. For sites where performance is paramount, system fonts for body text and one distinctive web font for headings is a strong approach.
