Typography
TabletopForge includes built-in support for thematic Google Fonts tailored to the RPG, fantasy, and tabletop hobby aesthetic. This guide explains how to configure heading and body typefaces through the theme editor.
Accessing Typography Settings
- In the Shopify theme editor, open Theme Settings (⚙️ gear icon).
- Expand the Typography panel.
Heading Font
The heading font applies to all <h1> through <h4> elements, section titles, product names, and navigation labels.
Recommended thematic options:
| Font | Style | Best For |
|---|---|---|
| Cinzel | Classical Roman / Fantasy | High fantasy, RPG, dice stores |
| MedievalSharp | Gothic | Dark fantasy, grimdark wargame |
| Grenze Gotisch | Gothic Black Letter | Horror, blackletter aesthetic |
| Rajdhani | Modern Industrial | Sci-fi, futuristic miniatures |
| Orbitron | Geometric Sci-fi | Space opera, cyberpunk |
To select a heading font:
- Click Change next to Heading font.
- Browse the font picker and preview options in real time.
- Click Select to apply.
Body Font
The body font controls all paragraph text, product descriptions, labels, and UI copy.
Recommended readable options:
| Font | Style | Best For |
|---|---|---|
| Inter | Modern Sans | General purpose, high readability |
| Assistant | Humanist Sans | Friendly, accessible storefronts |
| Roboto | Geometric Sans | Clean, editorial look |
:::tip Contrast rule Pair a decorative heading font (e.g., Cinzel) with a neutral body font (e.g., Inter) to maintain readability while preserving the thematic aesthetic. :::
Font Size Controls
| Setting | Range | Default | Description |
|---|---|---|---|
| Heading size | 80% – 150% | 100% | Scales all heading sizes proportionally |
| Body text size | 12px – 20px | 16px | Controls paragraph and UI text size |
Adjusting Heading size to 110–120% creates a more dramatic, book-like hierarchy suited to fantasy storefronts.
Monospace Font
TabletopForge uses a monospace font (var(--tf-font-mono)) for diagnostic UI elements — including the product specifications panel, HUD overlays, and countdown timer displays. This font is fixed to Share Tech Mono and is not currently configurable through the editor (it can be overridden via custom CSS).
/* Custom CSS override example */
:root {
--tf-font-mono: 'Courier New', Courier, monospace;
}