Astro

onlyfonts is a provider for Astro’s Fonts API. Add one line and Astro resolves any onlyfonts font, then downloads, subsets, and self-hosts it at build time. The site ships zero third-party font requests. onlyfonts.ai itself runs this exact setup.

install

npm install @onlyfonts/unifont

configure

// 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] },
    ],
  },
});

use it

Preload the font in your layout head, then reference the CSS variable:

---
import { Font } from 'astro:assets';
---
<head>
  <Font cssVariable="--font-inter" preload />
</head>
<style>
  body { font-family: var(--font-inter); }
</style>

Astro writes the @font-face rules and the --font-inter variable for you, pointing at self-hosted, content-hashed woff2 files. Reference the variable, not the raw family name.

notes

any catalog font: swap name: 'Inter' for any family from the catalog
mix in a licensed or local font with Astro’s built-in local provider alongside onlyfonts() — providers coexist per family
variable weights: weights: ['300..800']
custom CDN base (e.g. your own domain): onlyfonts({ base: 'https://cdn.example.com' })
want a plain link tag with no build step? see fonts for Astro