Skip to content

feat: upgrade to Astro 6 with self-hosted Fonts API - #6

Merged
vairi merged 2 commits into
mainfrom
feat/astro-6-upgrade
Apr 16, 2026
Merged

feat: upgrade to Astro 6 with self-hosted Fonts API#6
vairi merged 2 commits into
mainfrom
feat/astro-6-upgrade

Conversation

@vairi

@vairi vairi commented Apr 16, 2026

Copy link
Copy Markdown
Contributor

Summary

Upgrades the entire monorepo from Astro 5.18 to Astro 6.1.7 and adopts the new Fonts API for self-hosted, optimized web fonts.

What changed

Astro 6 upgrade

  • "astro": "^5""^6" in all 4 site package.json files
  • No code-level breaking changes hit us (no ViewTransitions, no Astro.glob, no legacy content collections)
  • Node 22.15 meets the v6 requirement (22.12+)

Fonts API adoption (the big improvement)

Before: Each site loaded fonts via @import url('https://fonts.googleapis.com/...') in global.css. This meant:

  • Runtime requests to Google's servers on every page load
  • User data sent to a third party (GDPR concern)
  • No font optimization or fallback generation

After: Fonts are configured in astro.config.mjs via the Astro 6 Fonts API:

import { defineConfig, fontProviders } from 'astro/config';

export default defineConfig({
  fonts: [
    {
      provider: fontProviders.google(),
      name: 'Inter',
      cssVariable: '--font-heading',
      weights: [400, 500, 600, 700, 800, 900],
    },
  ],
});

This means:

  • Fonts are downloaded at build time and self-hosted from your own domain
  • Zero runtime requests to fonts.googleapis.com
  • Automatic optimized fallback fonts with matching metrics (no layout shift)
  • Better privacy — no user data sent to third parties
  • Preload links generated automatically

Scaffolder updated

scripts/new-site.sh now generates the Fonts API config in astro.config.mjs per preset instead of writing @import lines in CSS.

Font config per preset

Preset Heading font Body font
Corporate Inter Inter
SaaS Sora Inter
Warm Playfair Display Source Sans 3

Test plan

  • bun install clean (Astro 6.1.7 installed)
  • bun run build — all 4 sites build successfully
  • No TypeScript errors
  • No deprecated API usage found (no ViewTransitions, Astro.glob, or legacy collections)
  • CI passes
  • Visual verification that fonts render correctly on demo sites after deploy
  • Lighthouse check for font performance improvement

Risk

Low. Astro 6 is a clean upgrade for this codebase — we weren't using any of the removed/changed APIs. The font change is the only user-visible difference and it should look identical (same fonts, same weights) while being faster.

Upgrades from Astro 5.18 to Astro 6.1.7. Key changes:

- All 4 sites now use the Astro 6 Fonts API (configured in astro.config.mjs)
  instead of third-party Google Fonts CSS @import. Fonts are downloaded at
  build time, self-hosted, and served with optimized fallbacks — no runtime
  requests to fonts.googleapis.com, better privacy and performance.
- Removed all @import url('https://fonts.googleapis.com/...') from global.css
- Updated scaffolder (new-site.sh) to generate Fonts API config per preset
  instead of writing @import lines
- Bumped "astro": "^5" → "^6" in all site package.json files
- Updated README (Astro 5 → Astro 6) and CLAUDE.md with Fonts API note

Font configuration per preset:
- Corporate: Inter (heading + body)
- SaaS: Sora (heading) + Inter (body)
- Warm: Playfair Display (heading) + Source Sans 3 (body)

No breaking changes to component code — all components use CSS custom
properties (--font-heading, --font-body) which the Fonts API populates
automatically.
@vairi
vairi merged commit 80ae66c into main Apr 16, 2026
1 of 2 checks passed
@vairi
vairi deleted the feat/astro-6-upgrade branch April 16, 2026 05:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants