Nuxt Font Preload

Minimize Content Layout Shifts (CLS) by preloading fonts. A developer-focused tool for font preloading, nuxt-font-preload will automatically generates <link rel="preload"> tags and @font-face declarations for your custom fonts.

[!NOTE] This module is intended for use with self-hosted fonts, and does not support Google Fonts or other external font providers.

• ✨  Release Notes
• 🏀 Online playground

Features

• 💡  Declares custom fonts using @font-face
• ✋  Reduces CLS by preloading fonts
• ✨  Easy integration with Nuxt 3

Quick Setup

1. Add nuxt-font-preload dependency to your project

npm i -D nuxt-font-preload

2. Add nuxt-font-preload to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-font-preload"],

  fontPreload: {
    fonts: [
      {
        fontFamily: "Montserrat",
        weights: [
          {
            weight: 400,
            sources: [
              {
                url: "fonts/Montserrat-Regular.woff2",
                format: "woff2",
                preload: true,
              },
            ],
          },
        ],
        // Applies to all weights
        defaultOptions: { fontDisplay: "swap" },
      },
    ],
  },
});

That's it! Your Nuxt app will now preload fonts efficiently ✨

Contributing

You can contribute to this module and test it locally by following these steps:

1. Clone this repository
2. Install dependencies using pnpm install
3. Prepare development server using pnpm dev:prepare
4. Build module using pnpm prepack
5. Launch playground using pnpm dev