Getting Started

Installation

Get started with Nuxt Fonts right away.

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

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

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

Configuration

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.

To keep downloads small, @nuxt/fonts loads the 400 700 weight range by default rather than every weight a family ships. The configuration docs cover how to change that, along with every other option.

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:
    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.

Configuration

Nuxt Fonts works out of the box with zero config, but you can always add some configurations for finer-grained control.