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.

Typography options by Ghost

---

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.