nuxt-vite-plugin-webfont-dl

Automatically install and configure the vite-plugin-webfont-dl plugin.

• ✨ Release Notes

Requirements

• Node.js >=22.12.0
• Nuxt >=3.19.0

Installation

Using pnpm:

pnpm add -D nuxt-vite-plugin-webfont-dl

You can also use yarn, npm, or bun.

Usage

Add nuxt-vite-plugin-webfont-dl to the modules section of your nuxt config.

export default defineNuxtConfig({
    modules: ['nuxt-vite-plugin-webfont-dl'],
    vitePluginWebfontDl: { // Configure
        webfontUrls: [] // Set urls
    }
});

For instructions on configuring URLs, refer to this link.

For other options, refer to this link.

How it works

Since the original vite-plugin-webfont-dl plugin exclusively handled Vite scenarios, it did not affect dev or build outputs in Nuxt. This module implemented the following actions:

1. A new client plugin has been added to remove the media attribute from links. For details, refer to the comments in the options section.
2. If in dev mode, add a link tag to the head that loads /_nuxt/@webfonts/webfonts.css.
3. For build outputs, the vite plugin retrieves the final output filename of webfont.css. Through a Nuxt hook, the link tags to be inserted into the HTML are passed to Nitro, enabling Nitro to insert these tags into the HTML head during output.

License

MIT License