@nuxt/fonts

Introduction

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. There's nothing to import and no component to wrap your text in.

• No configuration to start: add the module and keep writing CSS. Every option 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.
• Less layout shift: a local system font is scaled to match each web font's metrics, so text barely moves when the real file arrives.
• Smaller files when you ask: the glyphs option subsets a family down to the characters you actually render.

Automatic Installation

To get started, add @nuxt/fonts to your project:

npx nuxt module add fonts

Manual Installation

Or you can install it manually.

pnpm i @nuxt/fonts

yarn add @nuxt/fonts

npm i @nuxt/fonts

Then, add it to the modules in your nuxt.config:

export default defineNuxtConfig({
  modules: [
    '@nuxt/fonts',
  ]
})

Usage

You can now get started by adding a font-family declaration to your CSS.

<template>
  <div>
    Hello Nuxt Fonts!
  </div>
</template>

<style scoped>
div {
  font-family: Roboto, sans-serif;
}
</style>

That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser. Read more about how it works.

Troubleshooting

If an error occurs during installation:

• Ensure that you are using the latest LTS version of Node.js (release schedule)

• Try to upgrade to latest versions:

  pnpmyarnnpm

  pnpm up @nuxt/fonts

• Try recreating your lock-file:

  npx nuxt upgrade --force

• Check your network connection. Your machine might be having a hard time communicating with the font providers.
• If none of the above worked, please open an issue and include the error trace, OS, Node version and the package manager used for installing.
• If you're missing certain fonts or their variations, please confirm the module is configured to load the fonts you expected to see.