Font Switcher Component — Astro

Accessible font pair (sans + mono) switcher with preview and keyboard navigation

Font Switcher Component

The FontSwitcher is integrated into the Settings panel but can also be used standalone. It sets --font-family and --font-family-mono on <html> and persists the choice in localStorage (key fontPair).

Add this component

The command below includes <strong>Font Switcher</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live Example

Try switching font pairs below:

Usage

FontSwitcher script runs after DOM ready and initializes every [data-font-switcher] on the page. Use it inside Settings or standalone.

Usage

Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.

Astro Vanilla Svelte Vue React

Features

  • Dropdown lists all font pairs (sans + mono). Body text uses the sans font; code blocks use the mono font.
  • Preview panel — When the menu is open, hover or focus an option to see a preview of that pair (sample + mono).
  • Persists selection in localStorage (key fontPair).
  • Full keyboard navigation: Enter/Space to open/close, Arrow keys to move, Enter/Space to select, Escape to close.
  • Optional idPrefix prop to avoid duplicate IDs when multiple FontSwitchers exist (e.g. in Settings and on the page).

Keyboard Navigation

  • Enter or Space — Open/close menu
  • ArrowDown — Open menu and focus first option
  • ArrowUp / ArrowDown — Navigate options
  • Enter or Space — Select font pair
  • Escape — Close menu

Font pairs

Font pairs are defined in config (FONT_PAIRS, FONT_PAIR_DEFAULT). When you add Settings via the CLI, it copies fonts.ts (Astro: src/components/config/fonts.ts; Svelte: src/lib/config/fonts.ts). Each pair sets --font-family (sans) and --font-family-mono (mono) on the document. The layout flash script applies the stored pair on load before the component script runs.

Other frameworks: Vanilla ¡ Svelte ¡ Vue ¡ React