Optimized Fonts in Nuxt

Typography plays a critical role in web performance and user experience. While custom fonts can elevate a website’s design, they often come at the cost of increased load times if not properly optimized. Fortunately, Nuxt provides a streamlined solution for managing and optimizing fonts with the @nuxt/fonts module.

In this article, we’ll explore how to integrate, configure, and optimize fonts in your Nuxt project using @nuxt/fonts.

Enjoy!

🤔 What is @nuxt/fonts?

The @nuxt/fonts module provides a simple and flexible way to:

• Inline or preload font files
• Control file formats (e.g., WOFF2, WOFF, TTF)
• Optimize loading strategies (e.g., swap, optional, fallback)
• Self-host fonts instead of relying on external CDNs

This module is especially useful for improving Core Web Vitals, particularly First Contentful Paint (FCP) and Cumulative Layout Shift (CLS).

🟢 Optimizing fonts in Nuxt?

To get started, install the module:

npm install --save-dev @nuxt/fonts

Then, register it in your nuxt.config.ts:

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

Place your font files (e.g., .woff2, .woff, .ttf) in a local directory such as /assets/fonts/. Then configure the module to include and optimize them:

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

  fonts: {
    dir: 'assets/fonts', // relative to project root
    families: {
      Inter: {
        sources: [
          {
            src: 'Inter-Regular.woff2',
            weight: 400,
            style: 'normal',
          },
          {
            src: 'Inter-Bold.woff2',
            weight: 700,
            style: 'normal',
          },
        ],
      },
    },
    preload: true,
    display: 'swap',
  },
})

Let's stop for a second to explain each configuration option:

• dir: Path to the directory where font files are stored
• families: Define font families and their weights/styles
• preload: Inject <link rel="preload"> for performance
• display: Sets the font-display property (swap recommended for web)

Once defined, fonts are automatically injected into your global styles via @font-face declarations. You can use them directly in your CSS:

body {
  font-family: 'Inter', sans-serif;
}

Tips for Better Font Performance

• Prefer .woff2 format for modern browsers—it’s the most compressed.
• Keep font file sizes small by subsetting unused characters.
• Use font-display: swap to avoid invisible text during loading.
• Only load fonts you actually use (avoid loading multiple weights/styles unnecessarily).

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

The @nuxt/fonts module is a powerful addition to any Nuxt 3 project that aims to deliver a performant, visually consistent user experience. It abstracts the complexity of font optimization, letting you focus on your app while still getting the performance benefits of best practices.

By self-hosting and properly configuring your fonts, you not only gain more control but also create a more resilient, privacy-friendly frontend—especially important in a post-GDPR, Core Web Vitals-driven world.

Take care and see you next time!

And happy coding as always 🖥️