fonts for Nuxt apps

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 an open-source alternative, and because it's a unifont provider it plugs straight into @nuxt/fonts.

with @nuxt/fonts

Install the provider:

npm install @onlyfonts/unifont

Register it and reference it by name — Nuxt subsets and self-hosts the woff2 at build, so the browser never talks to Google or any CDN:

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

Then use font-family: 'Inter' in your CSS. Full reference: Nuxt docs.

or a plain link tag, no module

Prefer zero config? The CDN is Google Fonts-compatible — declare the stylesheet in your app head:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preconnect', href: 'https://cdn.onlyfonts.ai', crossorigin: '' },
        { rel: 'stylesheet', href: 'https://cdn.onlyfonts.ai/css2?family=Inter:wght@400;600&display=swap' },
      ],
    },
  },
});

notes for Nuxt

• works with SSR, SSG, and SPA modes
• any font in the catalog — swap name: 'Inter' for any family
• unicode-range subsets mean visitors download only the scripts a page uses (subsetting)
• variable fonts: family=Fixel:wght@300..800

picking the font

search semantically or identify a font from a screenshot, then use its name. Full endpoint docs: CDN reference.