Go back

Documentation

Astrotype installs fonts into your Astro project and wires Astro Fonts API for you. Use pairings for full heading/body/mono systems, or use single-font installs for custom mappings.

Install a font pairing

This creates src/styles/astrotypes/oyster.css, updates src/styles/global.css, and updates Astro font config files so your fonts load through Astro.

npx astrotype add oyster

Switch to another pairing

Astrotype keeps only one active pairing import in global.css so pairing styles do not conflict.

npx astrotype add acacia

Install one font

This creates a single token file like src/styles/astrotypes/inter.css and adds that font to Astro Fonts API config.

npx astrotype add:font inter

CSS-only mode (no Tailwind required)

Use CSS-only mode if you do not want Astro Fonts API wiring. This works with plain CSS projects too.

npx astrotype add oyster --css-only
npx astrotype add:font inter --mode css

In CSS-only mode, Astrotype updates only src/styles/astrotypes/*.css and src/styles/global.css. It skips src/astrotypes/fonts.mjs, src/astrotypes/fonts.state.json, and astro.config.*.

Use the classes

Pairing CSS maps these classes to --font-heading, --font-body, and --font-mono.

<Text tag="h1" class="font-heading">Heading</Text>
<Text tag="p" class="font-body">Body</Text>
<Text tag="small" class="font-mono">Mono</Text>

Validate your setup

Run astrotype doctor to check project layout, global CSS, astrotypes imports, pairing imports, and Astro Fonts wiring. Use --fix for safe automatic repairs, or --json for CI.

npx astrotype doctor
npx astrotype doctor --fix
npx astrotype doctor --json