Web fonts for Nuxt, without the setup

Write a font-family declaration and Nuxt Fonts finds the font, serves it from your own origin, and generates fallback metrics to reduce layout shift.
Get started

One declaration. Any provider.

Providers connect Nuxt Fonts to a font source. Each one looks up a family and fetches its files. Pick a built-in provider, mix several in one project, or write your own.

Fraunces

font-family: 'Fraunces' resolved by the google provider

Bricolage Grotesque

font-family: 'Bricolage Grotesque' resolved by the bunny provider

Satoshi

font-family: 'Satoshi' resolved by the fontshare provider
Read the provider docs

What happens after the build starts

Nuxt Fonts runs over your CSS as it's processed, so there's nothing to import and no component to wrap your text in.
  1. 01

    Resolve

    Nuxt Fonts reads every font-family in your CSS, checks public/ for a matching file, then asks each provider in turn.

    Provider lookups run through unifont.

  2. 02

    Generate

    Matching families get @font-face rules injected into the same stylesheet that used them, with the right weights, styles and unicode ranges.

  3. 03

    Serve

    Font files are downloaded at build time, hashed into your build assets and served from your own origin, so production makes no third-party requests.

  4. 04

    Stabilise

    A local system font is scaled to match the web font's metrics, so text barely moves when the real file arrives.

    Fallback metrics come from fontaine.

How it works in detail

Defaults worth keeping

    No configuration to start
    Add the module and keep writing CSS. Everything here is a default you can change, not a step you have to take.
    Eight built-in providers
    local, google, googleicons, bunny, fontshare, fontsource, npm and adobe, plus any provider you write.
    Self-hosted in production
    Fonts are downloaded at build time and served from your own origin with long-lived cache headers.
    Smaller files when you ask
    Opt in to the glyphs option to subset a family down to the characters you actually render.

Built on unjs

Nuxt Fonts is the Nuxt-shaped layer over a handful of unjs packages. Each of them is useful on its own.
    unifont
    Resolves font metadata from Google, Adobe, Bunny, Fontshare, Fontsource, npm and any provider you write. Framework-agnostic.
    fontaine
    Generates the adjusted fallback @font-face rules that keep your layout still while a web font loads.
    fontless
    The same pipeline as a Vite plugin, for projects that aren't built on Nuxt.

Add it to your app in one command

Nuxt Fonts is MIT licensed and maintained by the Nuxt team.
Get startedStar on GitHub