Nuxt
onlyfonts is a unifont provider, and @nuxt/fonts is built on unifont — so it plugs straight in. Nuxt downloads and self-hosts the woff2 at build, so there are no runtime requests to Google or any CDN.
install
npm install @onlyfonts/unifont
configure
Register the provider with the fonts:providers hook, then reference it by name:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
hooks: {
async 'fonts:providers'(providers) {
providers.onlyfonts = (await import('@onlyfonts/unifont')).default;
},
},
fonts: {
families: [
{ name: 'Inter', provider: 'onlyfonts' },
],
},
});
use it
Reference the family in your CSS as usual — @nuxt/fonts injects the @font-face and self-hosts the files automatically:
body { font-family: 'Inter', sans-serif; }
notes
- any catalog font: swap
name: 'Inter'for any family from the catalog - unicode-range subsets are preserved, so visitors download only the scripts a page uses
- Astro’s Fonts API is the fully worked reference — see the Astro guide
- want a plain link tag with no module? see fonts for Nuxt