> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/travio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/travio/admin-settings/typography.md).

# Typography

Travio supports both:

1. Ghost Typography settings, and
2. Fully custom self-hosted fonts.

### Ghost typography

What it does: Lets you choose heading/body fonts from Ghost UI.

So if you change Typography in Ghost, Travio updates automatically.

<div data-with-frame="true"><figure><img src="/files/w9IeNRxiBTiDkZsg3tQR" alt=""><figcaption><p>Typography options by Ghost</p></figcaption></figure></div>

***

### Add custom fonts

#### Step 1: Add font files

Add your `.woff2` files in `assets/fonts/`.

Use at least:

* Normal (body/headings)
* Italic (if your content uses italics)

#### Step 2: Update font-face declarations

Update the `@font-face` blocks in:

* `assets/css/index.css` (normal styles)
* `assets/css/fonts-italic.css` (italic styles)

#### Step 3: Point Travio font variables to your new family

Travio defines:

* `--font-heading: var(--gh-font-heading, "Fraunces", sans-serif);`
* `--font-text: var(--gh-font-body, "Open Sans", sans-serif);`

Keep Ghost override support, but replace fallback names with your preferred families if needed.

#### Step 4: Rebuild assets

Run: `npm run build`

Then upload the rebuilt theme zip.

#### Important implementation notes

* Do not edit `assets/built/*` directly; rebuild from source files.
* Keep italic variants, or browsers will synthesize fake italics.
* If using variable fonts, confirm supported weight range matches your design usage.
* If loading fonts from external CDN instead of bundling, ensure privacy/performance policy compatibility.