A good font pairing creates hierarchy without making the reader work harder. The heading face should establish character and emphasis, while the body face must remain comfortable across paragraphs, navigation, forms, captions, and small screens.
Five preserved Google Font pairings
The previews below use a limited set of requested weights and display=swap. If the external font request fails, the text remains visible through fallback font families.
Clear ideas deserve strong headlines.
Quattrocento Sans keeps supporting copy calm and readable while Arvo gives the headline a grounded, editorial presence.
Arvo + Quattrocento Sans
Suggested roles: Arvo for headings, pull quotes, or article titles; Quattrocento Sans for paragraphs, navigation, metadata, and interface labels.
Best suited to
Editorial sites, educational resources, portfolios, and brands that need a firm headline without using an aggressive display face.
A thoughtful voice can still feel modern.
Rosario provides an open sans-serif texture beneath Lora’s calligraphic serif details, producing contrast without a dramatic shift in tone.
Lora + Rosario
Suggested roles: Lora for headings and quotations; Rosario for body text, menus, buttons, captions, and supporting information.
Best suited to
Personal publishing, culture and lifestyle articles, long-form introductions, and designs that need warmth without appearing ornate.
Simple typography keeps the interface moving.
Open Sans and Pontano Sans create a subtle sans-serif pairing. Hierarchy depends on size, weight, spacing, and placement rather than serif-versus-sans contrast.
Open Sans + Pontano Sans
Suggested roles: Open Sans for heavier headings and controls; Pontano Sans for lighter paragraphs or secondary editorial copy.
Best suited to
Product interfaces, documentation, service websites, and layouts that need a restrained visual system rather than an expressive display face.
Build a sharper editorial hierarchy.
Lora softens Oswald’s narrow, high-impact headings and gives article paragraphs enough texture for sustained reading.
Oswald + Lora
Suggested roles: Oswald for short headlines, section labels, and compact navigation; Lora for summaries, article text, and quotations.
Best suited to
News, sports, event, entertainment, and magazine designs where headings need impact but body copy still needs a comfortable reading face.
Readable design begins with deliberate choices.
Raleway’s geometric rhythm creates a clean counterpoint to Merriweather’s screen-oriented serif forms.
Merriweather + Raleway
Suggested roles: Merriweather for article titles and serif-led content; Raleway for navigation, metadata, calls to action, or short supporting passages.
Best suited to
Publishing, professional services, case studies, portfolios, and polished brand sites that need both readability and visual refinement.
How to choose a font pairing
Start with the body font
Test paragraphs, lists, form labels, captions, and small screens before choosing a display face. Long-form readability is harder to repair later.
Create visible contrast
Contrast may come from classification, width, weight, scale, case, or spacing. Two fonts that are nearly—but not quite—the same can look accidental.
Check the complete character set
Review punctuation, numerals, quotation marks, symbols, accents, and every language the site must support.
Limit the number of roles
Define which face handles headings and which handles body or interface text. Avoid switching fonts section by section without a system.
Build a typography system, not isolated styles
Font choice is only one part of readable typography. Establish a repeatable scale and spacing system so the same content type looks consistent throughout the website.
| Role | Starting point | What to verify |
|---|---|---|
| Body text | Approximately 1rem with a line height near 1.5–1.75 | Comfort at normal and increased zoom, line length, punctuation, and mobile reflow. |
| Primary heading | Strong scale difference with one intentional weight | Wrapping, long words, localization, and whether the face remains readable at the chosen size. |
| Navigation | Clear medium weight with moderate spacing | Touch size, focus state, active state, and distinction from body links. |
| Metadata | Slightly smaller than body copy, not faint | Contrast, dates, author names, numerals, and readability on low-quality displays. |
Load multiple families with the Google Fonts CSS2 API
A single CSS2 request can include more than one family. Request only the weights and styles used by the design and include fallback families in the site’s CSS.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=Lora:wght@400;700&display=swap"
>body {
font-family: "Lora", Georgia, serif;
font-size: 1rem;
line-height: 1.7;
}
h1,
h2,
h3 {
font-family: "Oswald", "Arial Narrow", sans-serif;
font-weight: 600;
line-height: 1.1;
}The CSS2 API also supports variable-font axes when a selected family provides them. Requesting a useful range can be more flexible than loading many separate static weights, but the final file size and browser behavior should be measured rather than assumed.
Use Google Fonts in WordPress
WordPress typography controls depend on the active theme and version. Where the Font Library is available, site administrators can manage installed fonts through the Styles interface instead of manually editing theme files. A theme developer can also enqueue a Google Fonts stylesheet from a child theme or custom theme.
<?php
function tdwp_enqueue_font_pair() {
wp_enqueue_style(
'tdwp-font-pair',
'https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=Lora:wght@400;700&display=swap',
array(),
null
);
}
add_action( 'wp_enqueue_scripts', 'tdwp_enqueue_font_pair' );Performance considerations
- Load fewer families. Two well-chosen typefaces are usually enough for a complete website.
- Request fewer weights. Avoid loading every available weight when the design uses only regular and bold.
- Use
display=swap. Keep text visible while web fonts load. - Define fallback stacks. The fallback should preserve a usable layout when the remote file is delayed or blocked.
- Measure real pages. Test the final request, font files, layout shifts, rendering, and cache behavior instead of judging performance from the catalog alone.
- Consider variable fonts carefully. One variable file may replace several static weights, but the requested range and actual transfer size still matter.
Privacy and hosting choices
Using the Google Fonts Web API causes the visitor’s browser to request a stylesheet and font resources from Google-hosted domains. Google states that the Fonts API is unauthenticated, does not set cookies, and is designed to limit the collection, storage, and use of end-user data. Site owners should still evaluate local privacy requirements, policies, consent practices, and contractual obligations.
Self-hosting can keep font requests on the site’s own domain, but it also makes the site owner responsible for licensing, file formats, subsets, updates, caching, preload strategy, and delivery configuration. Use official font files and licenses rather than downloading altered files from an unverified source.
Readability and accessibility checks
- Confirm text remains legible at 200% zoom and on narrow screens.
- Do not use thin weights or low contrast for essential information.
- Avoid long paragraphs in condensed display fonts.
- Keep letter spacing moderate, especially for lowercase body text.
- Test bold, italic, links, form errors, numerals, and punctuation—not only sample headlines.
- Do not encode meaning through font style alone.
- Verify fallback fonts do not cause severe clipping, overlap, or button-label overflow.
Test the pairing before publishing
- Use real content. Test long titles, short titles, lists, quotes, forms, and dense paragraphs.
- Review several viewports. Check phones, tablets, laptops, wide screens, and increased text size.
- Disable the web-font request. Confirm that fallback fonts keep the page readable and functional.
- Inspect network activity. Verify that only the intended families and weights are downloaded.
- Check every language. Confirm the selected family contains the characters and styles required by the site.
- Compare hierarchy. Readers should immediately distinguish the page title, section headings, body text, labels, and metadata.
What changed from the original 2013 article
The original page introduced five preferred combinations in a short list. This revision preserves those pairings, corrects “Avro” to Arvo, adds live examples and recommended roles, and explains current CSS2 loading, WordPress integration, typography systems, fallbacks, accessibility, performance, privacy, and testing.
Related TDWP typography guide
For a more detailed WordPress implementation walkthrough, see How to Add Google Fonts to a WordPress Theme.
Article status
Archived discussion
The original page included an inactive reply form but no preserved comments. The form has been removed so visitors are not asked to submit personal information to an endpoint that may no longer work.
Questions, corrections, and font-pairing suggestions can be sent through the redesigned TDWP contact page.