Fonts

src/fonts.config.json defines the font families:

{
  "families": [
    {
      "provider": "google",
      "name": "Roboto",
      "cssVariable": "--font-roboto",
      "weights": [300, 400, 500, 700],
      "styles": ["normal", "italic"],
      "subsets": ["latin", "latin-ext"]
    }
  ]
}

SiteFonts.astro renders <Font cssVariable="--font-roboto" /> for each family. The font is self-hosted by Astro Fonts (no Google <link> tags).

src/styles/fonts.css (generated by npm run sync) maps the CSS variable to --font-sans:

@theme inline {
  --font-sans: var(--font-roboto);
}

Tailwind 4 picks it up automatically. Use font-sans in any block.

preload: true adds a <link rel="preload"> to the head. display: swap (default) avoids invisible text during font load. Self-hosted means no third-party request at runtime.