---
canonical_url: "https://fonts.nuxt.com"
---
<hero-background className="absolute,w-full,top-[var(--ui-header-height)],transition-all,text-primary,flex-shrink-0">



</hero-background>

<u-page-hero :ui="{"container":"py-14 sm:py-16 lg:pt-16 lg:pb-24 gap-10 lg:gap-16"}" orientation="horizontal">
<template v-slot:title="">

Web fonts for Nuxt, <span className="text-primary-600,dark:text-primary-400">

without the setup

</span>
</template>

<template v-slot:description="">

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.

</template>

<template v-slot:links="">
<u-button size="xl" to="https://fonts.nuxt.com/get-started/installation" icon="i-lucide-rocket">

Get started

</u-button>

<copy-code-input source="npx nuxt module add fonts">



</copy-code-input>
</template>

<fonts-videos>



</fonts-videos>
</u-page-hero>

<u-page-section>
<template v-slot:title="">

One declaration. <span className="text-primary-600,dark:text-primary-400">

Any provider.

</span>
</template>

<template v-slot:description="">

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.

</template>

<template v-slot:body="">
<font-specimens>



</font-specimens>

<provider-index className="mt-10">



</provider-index>
</template>

<template v-slot:links="">
<u-button size="lg" to="https://fonts.nuxt.com/get-started/providers" color="neutral" variant="subtle" trailing-icon="i-lucide-arrow-right">

Read the provider docs

</u-button>
</template>
</u-page-section>

<u-page-section>
<template v-slot:title="">

What happens <span className="text-primary-600,dark:text-primary-400">

after the build starts

</span>
</template>

<template v-slot:description="">

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

</template>

<template v-slot:body="">
<font-pipeline>



</font-pipeline>
</template>

<template v-slot:links="">
<u-button size="lg" to="https://fonts.nuxt.com/advanced#how-it-works" color="neutral" variant="subtle" trailing-icon="i-lucide-arrow-right">

How it works in detail

</u-button>
</template>
</u-page-section>

<u-page-section :ui="{"features":"sm:grid-cols-2 lg:grid-cols-2 gap-x-10 gap-y-8"}">
<template v-slot:title="">

Defaults worth <span className="text-primary-600,dark:text-primary-400">

keeping

</span>
</template>

<template v-slot:features="">
<u-page-feature className="border-t,border-default,pt-6" to="https://fonts.nuxt.com/get-started/configuration">
<template v-slot:title="">

No configuration to start

</template>

<template v-slot:description="">

Add the module and keep writing CSS. Everything here is a default you can change, not a step you have to take.

</template>
</u-page-feature>

<u-page-feature className="border-t,border-default,pt-6" to="https://fonts.nuxt.com/get-started/providers">
<template v-slot:title="">

Eight built-in providers

</template>

<template v-slot:description="">

`local`, `google`, `googleicons`, `bunny`, `fontshare`, `fontsource`, `npm` and `adobe`, plus any provider you write.

</template>
</u-page-feature>

<u-page-feature className="border-t,border-default,pt-6" to="https://fonts.nuxt.com/advanced#how-it-works">
<template v-slot:title="">

Self-hosted in production

</template>

<template v-slot:description="">

Fonts are downloaded at build time and served from your own origin with long-lived cache headers.

</template>
</u-page-feature>

<u-page-feature className="border-t,border-default,pt-6" to="https://fonts.nuxt.com/get-started/configuration#glyphs">
<template v-slot:title="">

Smaller files when you ask

</template>

<template v-slot:description="">

Opt in to the `glyphs` option to subset a family down to the characters you actually render.

</template>
</u-page-feature>
</template>
</u-page-section>

<u-page-section :ui="{"features":"sm:grid-cols-3 gap-6"}">
<template v-slot:title="">

Built on <span className="text-primary-600,dark:text-primary-400">

unjs

</span>
</template>

<template v-slot:description="">

Nuxt Fonts is the Nuxt-shaped layer over a handful of unjs packages. Each of them is useful on its own.

</template>

<template v-slot:features="">
<u-page-card target="_blank" to="https://unifont.dev" variant="subtle">
<template v-slot:title="">

unifont

</template>

<template v-slot:description="">

Resolves font metadata from Google, Adobe, Bunny, Fontshare, Fontsource, npm and any provider you write. Framework-agnostic.

</template>
</u-page-card>

<u-page-card target="_blank" to="https://github.com/unjs/fontaine" variant="subtle">
<template v-slot:title="">

fontaine

</template>

<template v-slot:description="">

Generates the adjusted fallback `@font-face` rules that keep your layout still while a web font loads.

</template>
</u-page-card>

<u-page-card target="_blank" to="https://github.com/unjs/fontaine" variant="subtle">
<template v-slot:title="">

fontless

</template>

<template v-slot:description="">

The same pipeline as a Vite plugin, for projects that aren't built on Nuxt.

</template>
</u-page-card>
</template>
</u-page-section>

<u-page-section className="bg-muted,border-t,border-default">
<template v-slot:title="">

Add it to your app <span className="text-primary-600,dark:text-primary-400">

in one command

</span>
</template>

<template v-slot:description="">

Nuxt Fonts is MIT licensed and maintained by the Nuxt team.

</template>

<template v-slot:links="">
<u-button size="xl" to="https://fonts.nuxt.com/get-started/installation" icon="i-lucide-rocket">

Get started

</u-button>

<u-button size="xl" to="https://github.com/nuxt/fonts" color="neutral" icon="i-simple-icons-github" variant="subtle" target="_blank">

Star on GitHub

</u-button>
</template>
</u-page-section>

## Resources for Agents

- [API catalog: every service document this site publishes](https://fonts.nuxt.com/.well-known/api-catalog)
- [Sitemap (XML)](https://fonts.nuxt.com/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://fonts.nuxt.com/sitemap.md)
- [MCP server card: MCP endpoint at https://fonts.nuxt.com/mcp](https://fonts.nuxt.com/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://fonts.nuxt.com/mcp)
- [llms.txt: index of the documentation for LLMs](https://fonts.nuxt.com/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://fonts.nuxt.com/llms-full.txt)
- [OpenAPI document: every route this site serves to agents](https://fonts.nuxt.com/openapi.json)


## Sitemap

See the full [sitemap](https://fonts.nuxt.com/sitemap.md) for all pages.