> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Typography settings, the type scale, and how to add a custom self-hosted font.

# Typography reference

# Typography reference

Every typography setting in Vara SaaS, the type scale behind it, and how to extend it.

**Admin path:** Appearance → Customize → Vara SaaS → Typography

## Settings

| Setting | Default | Setting key | Control | Range / options |
| - | - | - | - | - |
| **Base Font-family** | `Roboto, sans-serif` | `vara_saas_font_family` | Select | Six allowlisted stacks |
| **Base font size (px)** | `16` | `vara_saas_base_size` | Custom stepper | 12–48 |

### Available font stacks

| Label | Stack |
| - | - |
| **Roboto** | `Roboto, sans-serif` |
| **Inter** | `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif` |
| **Open Sans** | `'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif` |
| **Helvetica Neue** | `'Helvetica Neue', Helvetica, Arial, sans-serif` |
| **Georgia** | `Georgia, 'Times New Roman', Times, serif` |
| **Monospace** | `'Courier New', Courier, monospace` |

> [!NOTE]
>
> The font field is sanitized against this allowlist. A value that is not in the list is rejected on save rather than being written through.

## Bundled fonts

Two families ship with the theme, subset to Latin in `woff2` only.

| Font | Family | File | Role |
| - | - | - | - |
| **Inter** | Sans-serif | `assets/fonts/inter/inter-latin.woff2` | Body copy, UI |
| **JetBrains Mono** | Monospace | `assets/fonts/jetbrains-mono/jetbrains-mono-latin.woff2` | Code, technical values |

Both are preloaded in the page head, so the browser starts fetching them immediately rather than discovering them in CSS.

**How Inter gets used**

Selecting **Inter** from the dropdown maps to the bundled file. Selecting a stack you have not
self-hosted falls back to whatever the browser has — that is normal and expected, not an error.

![Screenshot: browser network panel showing woff2 font requests served from your own domain](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/typography-reference-network.png)

## The base size scale

Your base size is the root. Everything else is relative to it.

| Element | Relative size |
| - | - |
| Body copy | 1× your base size |
| Small text and metadata | \~0.875× |
| Captions | \~0.8125× |
| `h6` | \~1.125× |
| `h5` | \~1.25× |
| `h4` | \~1.5× |
| `h3` | \~1.75× |
| `h2` | \~2.125× |
| `h1` | \~2.5× |

Changing the base size rescales the whole hierarchy.

> [!TIP]
>
> A stepper control with increment and decrement arrows sits next to the numeric field. Values outside 12–48 are clamped on save.

## The block editor scale

`theme.json` gives the block editor its own named size scale, independent of your Customizer base size.

| Token | Intended use |
| - | - |
| `display-lg` | Hero headlines |
| `display-md` | Page titles |
| `heading-lg` | Section headings |
| `heading-md` | Subsection headings |
| `heading-sm` | Card headings |
| `body-lg` | Lead paragraphs |
| `body-md` | Default body copy |
| `body-sm` | Secondary text |
| `caption` | Captions, footnotes |
| `overline` | Eyebrow and label text |

```json theme={null}
{
  "settings": {
    "typography": {
      "fontSizes": [
        { "slug": "display-lg", "size": "3.5rem" },
        { "slug": "body-md", "size": "1rem" }
      ]
    }
  }
}
```

**Block editor fonts**

The editor also offers **Inter** and **JetBrains Mono** as global font options, and loads an
editor stylesheet so the canvas matches the front end. See
[Block editor](/integrations/block-editor.md).

## Editor styles

The theme calls `add_editor_style()` so the block editor canvas renders in your chosen typeface and base size rather than WordPress's defaults.

![Screenshot: the block editor canvas using the theme's font and base size](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/typography-reference-editor.png)

## Adding a custom font

The Customizer only accepts its six stacks. For anything else, self-host it.

**1. Upload the font files**

Add your `.woff2` to the site. A media upload works, though a `.woff2` may be rejected by your host — FTP or a file manager is more reliable.

**2. Declare it with @font-face**

In **Appearance → Customize → Additional CSS**, or better, a child theme.

**3. Apply it**

Override the font on `body`, then on headings if you want a different family there.

```css theme={null}
/* Appearance → Customize → Additional CSS */

@font-face {
  font-family: "Your Brand Font";
  src: url("/wp-content/uploads/your-brand-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Your Brand Font", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Your Brand Font", system-ui, -apple-system, sans-serif;
}
```

> [!WARNING]
>
> **Self-host rather than linking Google Fonts.** A `<link>` to `fonts.googleapis.com` adds a third-party connection to every page load, costs you render performance, and gives the provider your visitors' IP addresses. Download the font and serve it yourself.

> [!TIP]
>
> **Use `font-display: swap`.** It tells the browser to show text in a fallback while the webfont loads, rather than blocking on it. The theme's own bundled fonts do this.

For anything beyond a one-off font, a child theme is the right home for the CSS. See [Child themes](/developers/child-themes.md).

## Practical guidance

> **One family is enough**
>
> The theme uses your base family for both headings and body. A separate display font is a refinement, not a requirement.

> **16px is the safe default**
>
> Anything from 15 to 18 works well for marketing content. Below 15 hurts long-form readability.

> **Line length beats font size**
>
> 60–80 characters per line is comfortable. The default container widths stay in this range. If you widen the container a lot, constrain the text column.

> **Test in both modes**
>
> Muted text is lightened in dark mode. Confirm your metadata and excerpts remain readable.

## Related

> **[Typography](/getting-started/typography.md)**
>
> A guided walkthrough of setting your fonts.

> **[CSS and design tokens](/developers/css-and-design-tokens.md)**
>
> Every CSS variable the theme exposes.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.