Fonts
Sveltier does not bundle fonts. Each theme names its families and falls back to system fonts, so you choose where fonts come from.
Why fonts are not bundled
Fonts are the heaviest part of a design language. Bundling them would charge every app for
families it may not use and take hosting, licensing and subsetting decisions away from you. A
theme only names the families in --sv-font-display, --sv-font-ui and --sv-font-data, each ending in system fallbacks, so the interface works before or
without them.
Fonts per theme pack
All families are open source and available as self-hosted Fontsource packages.
| Pack | Families | Install |
|---|---|---|
| Monolith | Geist for everything, Geist Mono for figures. Tight, confident headings. | pnpm add @fontsource-variable/geist @fontsource-variable/geist-mono |
| Heritage | Instrument Serif for display and figures, Instrument Sans for interface, IBM Plex Mono for data. | pnpm add @fontsource/instrument-serif @fontsource-variable/instrument-sans @fontsource/ibm-plex-mono |
| Aurora | Manrope for display and interface, JetBrains Mono for figures. Bold, rounded headings. | pnpm add @fontsource-variable/manrope @fontsource-variable/jetbrains-mono |
| Maison | Cormorant Garamond for display and figures, Jost for interface, DM Mono for data. Wide-tracked capitals. | pnpm add @fontsource-variable/cormorant-garamond @fontsource-variable/jost @fontsource/dm-mono |
| Milano | Bodoni Moda for display and figures, Titillium Web for interface, IBM Plex Mono for data. | pnpm add @fontsource-variable/bodoni-moda @fontsource/titillium-web @fontsource/ibm-plex-mono |
Load them
Import the font CSS once, next to the provider. Fontsource only declares @font-face rules; the browser downloads a file the first time a family is used.
<!-- src/routes/+layout.svelte -->
<script>
import '@fontsource-variable/geist';
import '@fontsource-variable/geist-mono';
import { UIProvider } from 'sveltier';
import { monolith } from 'sveltier/themes/monolith';
let { children } = $props();
</script>
<UIProvider themes={monolith}>{@render children()}</UIProvider>Performance tips
- Prefer the variable packages (
@fontsource-variable/…): one file per family. - Import only the weights you use with static packages, for example
400.css. - Preload the display font of your hero if it is above the fold, and nothing else, to protect Largest Contentful Paint.