Font Family

Which typeface the text in the column is set in.

Where to find it
Labelled Typography → Family in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
fontFamily

In plain English

The font family is the typeface — the shape of the letters themselves. RuleCMS offers a short curated list rather than free text, and each entry is a "stack": several fonts in order of preference, so that if the visitor's device does not have the first one, it falls back to the next.

The list covers the three broad kinds of typeface. Sans-serif fonts (no little feet on the letters) read as modern and clean and are the usual choice for screens. Serif fonts read as traditional and editorial. Monospace fonts give every character the same width, which is what you want for code or reference numbers.

The fonts on the list are all available on visitors' devices already, so they load instantly and never cause the flash of unstyled text that comes with downloaded web fonts.

What each option does

OptionWhat you will see
system-ui, -apple-system, …, sans-serifWhatever font the visitor's own operating system uses. Feels native everywhere and is the best default for interface text.
Georgia, "Times New Roman", Times, serifA classic serif. Reads as editorial and traditional — good for long-form articles.
ui-monospace, SFMono-Regular, Menlo, …, monospaceEvery character the same width. For code snippets, reference numbers, and tabular data.
Arial, Helvetica, sans-serifThe most universally available sans-serif. Neutral and safe.
"Helvetica Neue", Helvetica, Arial, sans-serifA slightly more refined sans-serif with a design-led feel.
Verdana, Geneva, sans-serifA wide, open sans-serif designed for screens. Very readable at small sizes.

When you would use it

  • A section should follow your brand's typographic style.
  • A block of code or reference data should be set in monospace.
  • Long-form article text would read better in a serif.

How to change it

  1. Select the column, open "Selected Column", then "Typography", then "Family".
  2. Pick a stack from the dropdown.
  3. Every piece of text inside the column follows.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • This is a picker, not a free text field, on purpose. It keeps published pages fast and stops a font being requested that the visitor does not have.
  • If your brand font is not on the list, that is a team-level font question rather than a per-column one — talk to whoever manages your component library.
  • Two or three typefaces on a page is plenty. More than that reads as chaotic.

Related settings

For developers

The technical reference for what this setting produces: MDN: font-family. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next