🔠 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

``bash
npm i vite-plugin-webfont-dl -D
`

📖 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 :
`html



`
2. Add webfontDownload to your Vite plugins without any configuration. The plugin will automatically handle everything:
`js
// vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl';

export default {
plugins: [
webfontDownload(),
],
};
`
3. The original webfont tags will be replaced in dist/index.html:
`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:
`html

`
2. Add webfontDownload to your Vite plugins with the selected Google Fonts CSS URL(s):
`js
// vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl';

export default {
plugins: [
webfontDownload([
'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'
]),
],
};
`




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

`css
h1 {
font-family: 'Press Start 2P', cursive;
}

h2 {
font-family: 'Fira Code', monospace;
}
`

$3


To use with the Laravel Vite Plugin, add this line to your Blade file:
`blade
@vite('webfonts.css')
`

$3

$3

- 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




$3


- injectAsStyleTag (boolean, default: true):

Inject webfonts as a
`
Or (using the dev server or injectAsStyleTag: false option):

`html


`

📱 What happens on the client-side with the Webfont-DL plugin:

1. Loads fonts from the embedded CSS (