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