@pyyupsk/vite-fonts

A Vite plugin that downloads web fonts at build time and serves them from your own output, instead of calling Google Fonts or another CDN at runtime.

Features

• Self-hosts fonts from Google Fonts, Bunny Fonts, Fontsource, or fonts.fasu.dev.
• Generates @font-face CSS with size-adjust fallback metrics, which removes layout shift.
• Injects <link rel="preload"> tags automatically.
• Creates one CSS variable per font family and syncs it with a Tailwind v4 @theme block.
• Gives you a type-safe meta module, so family keys autocomplete in your editor.
• Caches downloaded font files, so a second build does not redownload them.

Usage

// vite.config.ts
import { fonts } from '@pyyupsk/vite-fonts'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [fonts('Inter')],
})

An Astro integration works the same way, through @pyyupsk/vite-fonts/astro.

CLI

• bunx vite-fonts list: Shows configured fonts and cache info.
• bunx vite-fonts clean: Clears the font cache.