Installation - Nuxt Fonts

Automatic Installation

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

npx nuxi@latest module add fonts

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

If you don't already have it in your .gitignore, go ahead and add the .data directory:

.gitignore

.data

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 improve performance, @nuxt/fonts by default only loads the normal/400 font-weight. See the configuration docs on how to change this default.

Check out the configuration docs for all available options and features to customize.

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@latest 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.