Rural Blog docsAll pages

How the font picker works

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

Role Where Page
Base font Body copy, everything unstyled Body
Heading font h1–h6, widget titles, blockquotes Headings
Heading sizes h2, h3, h4, per device Headings
Menu typography The primary menu Menu font
Text logo typography The site name in the header Site title font
Post title font (listing) Titles in the blog listing and a Query Loop Entry titles
Meta font The date/category line and its relatives Meta font
Post title / Subtitle / Post content font A single post Design → 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:

Label Means
System default The device’s own font stack — on the primary roles
Same as heading font Follow the heading role, and keep following it
Same as base font Follow 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:

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.