vite-plugin-webfont-dl weekly downloads statistics

🔠 Webfont Download Vite Plugin ⚡

Automatically collects webfont links, imports, and definitions from your Vite project, downloads CSS and font files (privacy-first), adds the fonts to your bundle (or serves them through the dev server), and injects font definitions using a non-render-blocking method. External CSS and font files are stored in a persistent file cache, making them available for offline development.

📦 Install

📖 Table of Contents

1. 📦 Install 1. Usage: • 😎 [Zero config [method A]](#zero-config) • 🦄 [Simple config [method B]](#simple-config) 1. 🚀 That's all! • 🔌 Laravel • 📸 Screenshot 1. 🧩 Supported webfont providers 1. 🛠️ Options 1. ❓ Third-party webfonts 1. 🔮 How it works • 📉 Google Fonts • 📈 Webfont-DL Vite plugin 1. 📊 Benchmark 1. 📚 Resources 1. 📄 License

😎 Usage: Zero config [method A]

*Extracts, downloads, and injects fonts from the original Google Fonts code snippet.*

1. Select your font families from your webfont provider (e.g., Google Fonts) and copy the code from the "Use on the web" block into your : 2. Add webfontDownload to your Vite plugins without any configuration. The plugin will automatically handle everything: 3. The original webfont tags will be replaced in dist/index.html:

🦄 Usage: Simple config [method B]

*Extracts, downloads, and injects fonts from the configured webfont CSS URL(s).*

1. Select your font families from your webfont provider (e.g., Google Fonts) and copy the CSS URL(s) from the "Use on the web" code block: 2. Add webfontDownload to your Vite plugins with the selected webfont CSS URL(s):

🚀 That's all!

The webfonts are injected and ready to use. The plugin works seamlessly whether you are running a local development server or building for production.

💡 Import alias: The plugin can be imported using any of these names: webfontDownload, webfontDl, viteWebfontDl, ViteWebfontDownload, or viteWebfontDownload. Use whichever style you prefer!

🔌 Laravel

To use with the Laravel Vite Plugin, add this line to your Blade file:

📸 Screenshot

🧩 Supported webfont providers

• Google Fonts: works with Zero config or Simple config • Bunny Fonts: works with Zero config or Simple config • Fontshare: works with Zero config or Simple config • Fira Code, Hack fonts (cdn.jsdelivr.net): works with Zero config or Simple config • Inter font (rsms.me): works with Zero config or Simple config • *Any provider with CSS containing @font-face definitions works with Simple config*

🛠️ Options

Injection Options

• injectAsStyleTag (boolean, default: true) Inject webfonts as a tag (embedded CSS) or as an external .css file. • async (boolean, default: true) Controls CSS loading behavior (only applicable when injectAsStyleTag: false): • true: Async loading with media="print" trick (faster, but uses inline event handlers) • false: Standard blocking CSS loading (CSP-compliant, no inline scripts)

⚠️ For Chrome extensions or strict CSP environments, set async: false to avoid CSP violations.

Build Options

• minifyCss (boolean, default: *value of* build.minify) Minify CSS code during the build process. • embedFonts (boolean, default: false) Embed base64-encoded fonts directly into CSS. ⚠️ This can increase file size if CSS contains multiple references to the same font. Example • assetsSubfolder (string, default: '') Moves downloaded font files to a separate subfolder within the assets directory.

Performance Options

• cache (boolean, default: true) Persistently stores downloaded CSS and font files in a local file cache. Respects Vite's cacheDir configuration. Set to false to disable and delete the existing cache. • subsetsAllowed (string[], default: []) Restricts downloaded fonts to specified Unicode subsets (e.g., ['latin', 'cyrillic']). Leave empty to allow all subsets.

Network Options

• proxy (false | AxiosProxyConfig, default: false) Proxy configuration for network requests.

Error Handling

• throwError (boolean, default: false) If true, stops the build on font download/processing errors. If false, errors are logged as warnings and the build continues.

Example Configuration

With font URLs:

❓ Third-party webfonts

⚠️ Using the standard method to add third-party webfonts (Google Fonts, Bunny Fonts, or Fontshare) to a webpage can significantly slow down page load. Lighthouse and PageSpeed Insights call them *"render-blocking resources"*, which means the page can't fully render until the webfonts CSS has been fetched from the remote server.

📈 By avoiding render-blocking resources caused by third-party webfonts, you can boost page performance, leading to a better user experience and improved SEO results.

⚙️ The plugin downloads the specified fonts from the third-party webfont service (like Google Fonts) and dynamically injects them (as an internal or external stylesheet) into your Vite project, transforming third-party webfonts into self-hosted ones. 🤩

🔐 In addition to the significant performance increase, your visitors will also benefit from privacy protection, since there is no third-party server involved.

🔮 How it works

📉 Google Fonts

Google Fonts generates the following code, which you have to inject into your website's (*example*):…

Description from the npm listing.