---
title: Add custom fonts
description: Choose Google Fonts for body text and headings without editing the application runtime.
url: https://pr-7-a9c4e9fe1b6c.thally.app/guides/custom-fonts
---

# Add custom fonts

Choose Google Fonts for body text and headings without editing the application runtime.

Thally ships with **Inter** for body text and **JetBrains Mono** for code. You
can set the body and heading families with a `fonts` block in `docs.json`
without editing the application runtime.

## Configuration

```json
"fonts": {
  "body": { "family": "Plus Jakarta Sans", "weight": ["400", "500", "600", "700"] },
  "heading": { "family": "Outfit", "weight": ["600", "700"] }
}
```

Thally reads the config, fetches the font from Google Fonts, and overrides the CSS variables that control typography across the entire site.

## Fields

### `fonts.body`

Applies to all body text, UI labels, navigation, and the sidebar.

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `family` | `string` | `"Inter"` | Google Font family name (exact spelling, e.g. `"DM Sans"`) |
| `weight` | `string[]` | `["400","500","600","700"]` | Font weights to load |

### `fonts.heading`

Applies to h1–h6 headings in page content. When omitted, headings use the same font as the body.

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `family` | `string` | Same as body | Google Font family name |
| `weight` | `string[]` | `["600","700"]` | Font weights to load |

## Popular combinations

| Body | Heading | Character |
| --- | --- | --- |
| `Plus Jakarta Sans` | `Outfit` | Modern, geometric, product-y |
| `DM Sans` | `DM Sans` | Clean, minimal, neutral |
| `IBM Plex Sans` | `IBM Plex Sans` | Technical, monospaced-adjacent |
| `Lato` | `Lato` | Humanist, friendly, approachable |
| `Figtree` | `Figtree` | Rounded, contemporary |
| `Inter` | `Sora` | Sharp body + expressive headings |
| `Source Sans 3` | `Playfair Display` | Editorial, content-forward |

## How it works

When Thally detects a custom font in `docs.json`, it:

1. Generates a Google Fonts CSS URL for each configured family
2. Injects `<link rel="preconnect">` and `<link rel="stylesheet">` tags into the document head
3. Overrides the `--font-sans` and `--font-heading` CSS variables so Tailwind and prose typography pick up the new font

The default Inter font (loaded via `next/font`) stays as a fallback — so if the Google Fonts request fails, the page still renders correctly with Inter.

## Code font

The user-facing font configuration currently covers body and heading text.
Code uses the runtime's JetBrains Mono default. Do not edit
`src/app/layout.tsx`; it is framework-owned and replaced by supported runtime
updates.

> **Note:**
This documentation uses **Plus Jakarta Sans** for body text and **Outfit** for headings, configured in `docs.json` — exactly as described above.