fonts for Astro sites

Loading fonts from Google means a third-party request on every page — a GDPR liability and an extra origin on your critical path. onlyfonts is a drop-in, open-source alternative that plugs into Astro's native Fonts API. onlyfonts.ai runs on Astro and uses this exact setup.

one-line integration

Install the provider:

npm install @onlyfonts/unifont

Register it in your config — Astro subsets and self-hosts the font at build, so the browser never talks to Google or any CDN:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import { onlyfonts } from '@onlyfonts/unifont/astro';

export default defineConfig({
  experimental: {
    fonts: [
      { provider: onlyfonts(), name: 'Inter', cssVariable: '--font-inter', weights: [400, 600] },
    ],
  },
});

Then preload it in your layout and use var(--font-inter). Full walkthrough with the <Font> component: Astro docs.

or a plain link tag, no build step

Prefer zero config? The CDN is Google Fonts-compatible — one stylesheet in your layout head:

<!-- src/layouts/Layout.astro -->
<link rel="preconnect" href="https://cdn.onlyfonts.ai" crossorigin>
<link href="https://cdn.onlyfonts.ai/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

Then use font-family: 'Inter' in your CSS.

notes for Astro

• the provider works with any font in the catalog — swap name: 'Inter' for any family
• combine with Astro's built-in local provider for licensed or self-hosted fonts — they coexist
• the CSS API uses unicode-range subsets, so visitors download only the character sets a page uses (how subsetting works)
• variable fonts: weights: ['300..800']

picking the font

search semantically ("readable humanist sans for docs"), check the font page for language coverage and pairings, then drop the name into your config. See the Astro guide for the full reference.