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

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.*.

Switch to another pairing

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

npx astrotype add alchemy

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

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>

Files that change or overwrite

`npx astrotype add <pairing>` creates or overwrites src/styles/astrotypes/<pairing>.css.
Pairing switch behavior updates src/styles/global.css so only one pairing import is active at a time (old pairing imports are removed).
`npx astrotype add:font <font>` creates or overwrites src/styles/astrotypes/<font>.css and adds its import to src/styles/global.css.
Astro Fonts config updates src/astrotypes/fonts.mjs and src/astrotypes/fonts.state.json on every install so entries stay merged and consistent.
Astro config wiring updates your astro.config.* to import astrotypeFonts and set fonts: astrotypeFonts when needed.