How the font picker works

Eight type roles, one font list, and what "Same as heading" and "Default" actually mean.

Rural Blog does not have “a font setting”. It has type roles, each a single grouped control with the face and its size, weight, tracking, case and line height together — because those only mean anything as a set.

The roles

RoleWherePage
Base fontBody copy, everything unstyledBody
Heading fonth1–h6, widget titles, blockquotesHeadings
Heading sizesh2, h3, h4, per deviceHeadings
Menu typographyThe primary menuMenu font
Text logo typographyThe site name in the headerSite title font
Post title font (listing)Titles in the blog listing and a Query LoopEntry titles
Meta fontThe date/category line and its relativesMeta font
Post title / Subtitle / Post content fontA single postDesign → Single post

The first three are under Design → Typography; the rest sit with the thing they style — the menu in Design → Header, the listing roles in Design → Blog, the single-post roles in Design → Single post.

One font list, eight dropdowns

Every face dropdown offers the same list:

  1. A “not set” choice, whose label tells you what it falls back to.
  2. For secondary roles, a Same as base font / Same as heading font choice.
  3. Nine built-in web-safe stacks.
  4. Every family you have installed under Appearance → Fonts — see Add a custom font.

“Not set” is not “system”

This is the one thing worth understanding properly. Each role’s empty choice is labelled with what it actually does:

LabelMeans
System defaultThe device’s own font stack — on the primary roles
Same as heading fontFollow the heading role, and keep following it
Same as base fontFollow the base role, and keep following it
Default (weight, case)The theme’s own value for this role
Same as heading (weight, case)Track the heading role’s weight or case

The difference matters. A role set to Same as heading font keeps tracking the heading font if you change it later. A role where you picked Georgia by hand is pinned to Georgia forever.

Leave a secondary role on its inherit choice unless you have a reason not to. That is what makes restyling the site a two-dropdown job instead of an eight-dropdown one.

Case: “Default” and “None” are different answers

In every case dropdown:

  • Default / Same as heading — inherit, and whatever you inherit may well be uppercase.
  • None — as typed — the deliberate choice to leave the text exactly as written.

If you want lowercase headings, pick None — as typed; leaving it on Default is not the same instruction.

Sizes and units

Any CSS length works: 2rem, 32px, 1.8em, 120%. em is relative to the parent, which is why the theme’s own defaults use it — a title at 1.8em scales with the base size automatically.

Some roles have three size boxes — desktop, tablet, mobile. Leave the tablet and mobile boxes empty to keep the desktop size at that width. They are overrides, not requirements.

It previews live

Every typography control is painted into the preview as you type, without reloading the frame. Nothing is saved until you press Publish, so you can try anything.

Last updated September 12, 2026

Something missing or out of date? Ask us and we will fix the page.