Appearance → Customize → Typography. Four controls, one per type role: Body font, Heading font, Navigation font, Logo font.
Each is a group of fields rather than a single dropdown, because a typeface is a handful of decisions that only mean anything together — a face at the wrong weight, or set too tight, is a different typeface.
Empty means “leave it alone”
Every field in every control is optional. Leave one empty and nothing is emitted for it: the theme’s own stylesheet value stands.
That is worth knowing because it makes the section safe to experiment in. You are never choosing between your value and a default you cannot get back to — clear the field and the default returns. It also keeps the generated CSS to exactly what you changed.
The grey text in a field is the theme’s value, shown as a placeholder: 16px for the body size, 1.5 for its line height, 1.2em for the site title.
The face dropdown
Three kinds of entry, in this order:
System default (fastest) — the browser’s own font. Downloads nothing, renders before the first paint, and looks native on every platform. This is the default for the body and headings.
Nine web-safe stacks — Helvetica / Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman, Palatino, Courier New, and Monospace (system). Every one resolves against fonts the visitor already has, so there is still nothing to download and no request to a third party.
Your installed families — anything you added through Appearance → Fonts, WordPress’s Font Library (7.0 and newer). These are served as .woff2 files from your own domain; Stoat writes the @font-face rules for you. See adding a custom font.
There is no Google Fonts option, and there will not be. See the FAQ.
Two roles follow a third
On the Navigation font and Logo font controls, the face dropdown’s empty choice reads Same as headings, not System default. A menu and a site title that quietly follow the heading face are what most sites want, and it means changing the heading face changes three things at once.
The other fields on those controls do not work that way — an empty weight or size falls back to the stylesheet, not to the heading role. A menu is a row of links, not a row of headings.
Sizes that change on a phone
Body font and Logo font render their size field as three boxes: desktop, tablet, phone. Leave a narrow box empty and that width keeps whatever is above it.
| Box | Applies |
|---|---|
| Desktop | everywhere, unless overridden below |
| Tablet | 767px and under |
| Phone | 479px and under |
Which control does what
| Control | Fields | Affects |
|---|---|---|
| Body | face, size ×3, line height | all body copy |
| Headings | face, weight, letter case, tracking, line height | h1–h6 everywhere |
| Navigation | face, size, weight, tracking, letter case | the header menu and the drawer |
| Site title | face, size ×3, weight, tracking, letter case | the site title only |
Related
- Adding a custom font
- Layout widths — line length and font size are one decision