Installation

Automatic Installation

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

npx nuxi@latest 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:

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

Configuration

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

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

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