Typography

Fonts are self-hosted with Fontsource and wired through two tokens: --font-sans (UI and content) and --font-mono (code). Axerity ships with Geist and Geist Mono.

Where fonts live

The font files are imported in src/routes/+layout.svelte:

src/routes/+layout.svelte

<script lang="ts">	import '@fontsource-variable/geist/index.css';	import '@fontsource-variable/geist-mono/index.css';	import './layout.css';</script>

The tokens that point at them live in src/routes/layout.css:

src/routes/layout.css

@theme inline {	--font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;	--font-mono: 'Geist Mono Variable', ui-monospace, monospace;}

Swap a font

Install it

pnpm add @fontsource-variable/geist

Import the CSS

In src/routes/+layout.svelte, add the import (and drop the old one):

<script lang="ts">	import '@fontsource-variable/geist/index.css';</script>

Point the token at it

In src/routes/layout.css, update the family name (find the exact name in the package’s index.css):

@theme inline {	--font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;}

Type declarations

Fontsource CSS imports have no types, so they’re declared in src/app.d.ts:

src/app.d.ts

declare module '@fontsource-variable/geist/*';declare module '@fontsource-variable/geist-mono/*';

Add a matching line for any new font package.