Fonts

Velocity loads fonts through the Astro Fonts API. Fonts are self-hosted from the installed @fontsource-variable packages, so the build needs no network access. You also get a preload for the body font and metric-matched fallbacks that reduce layout shift.

Font	CSS variable	Used for
Manrope	--font-manrope	Body text
Outfit	--font-outfit	Headings
JetBrains Mono	--font-jetbrains-mono	Code

How It’s Wired

Families are registered in astro.config.mjs:

fonts: [
  fontsourceVariable({ name: 'Manrope', pkg: 'manrope', cssVariable: '--font-manrope', weight: '200 800', fallbacks: ['sans-serif'] }),
  fontsourceVariable({ name: 'Outfit', pkg: 'outfit', cssVariable: '--font-outfit', weight: '100 900', fallbacks: ['sans-serif'] }),
  fontsourceVariable({ name: 'JetBrains Mono', pkg: 'jetbrains-mono', cssVariable: '--font-jetbrains-mono', weight: '100 800', fallbacks: ['monospace'] }),
],

BaseLayout renders every family in this list and preloads the first, so keep your body font at the top.

Themes reference the variables:

--theme-font-sans: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
--theme-font-display: var(--font-outfit), var(--theme-font-sans);

Changing a Font

1. Install the package

   pnpm add @fontsource-variable/inter

2. Register it in the fonts array in astro.config.mjs. Put it first if it’s your body font:

   fontsourceVariable({ name: 'Inter', pkg: 'inter', cssVariable: '--font-inter', weight: '100 900', fallbacks: ['sans-serif'] }),

3. Use it in your theme by pointing --theme-font-sans at var(--font-inter).

Don’t @import font CSS. A family rendered with <Font /> but missing from fonts fails the build with FontFamilyNotFound.

Using a Font Provider

To fetch fonts at build time instead, use fontProviders.google() or fontProviders.fontsource() in place of the fontsourceVariable() helper:

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

fonts: [
  { provider: fontProviders.google(), name: 'Inter', cssVariable: '--font-inter' },
],

OG Images

Generated OG images use a separate font, public/fonts/inter-latin-400-normal.ttf, because Satori needs TTF or OTF rather than WOFF2.

Languages and Subsets

fontsourceVariable() registers every subset a font package ships, such as Cyrillic, Greek and Vietnamese. Browsers only download the subsets a page uses. BaseLayout preloads the Latin face of the body font. Check that a font covers your language: Outfit, for example, ships only Latin subsets.