# 🔠 **Webfont Download** Vite Plugin ⚡
[](https://www.npmjs.com/package/vite-plugin-webfont-dl)
[](https://www.npmjs.com/package/vite-plugin-webfont-dl)
[](https://www.npmjs.com/package/vite-plugin-webfont-dl)
**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](#install)
1. Usage:
* 😎 [Zero config [method A]](#zero-config)
* 🦄 [Simple config [method B]](#simple-config)
1. 🚀 [That's all!](#thats-all)
* 🔌 [Laravel](#laravel)
* 📸 [Screenshot](#screenshot)
1. 🧩 [Supported webfont providers](#supported-webfont-providers)
1. 🛠️ [Options](#options)
1. ❓ [Third-party webfonts](#third-party-webfonts)
1. 🔮 [How it works](#how-it-works)
* 📉 [Google Fonts](#google-fonts)
* 📈 [Webfont-DL Vite plugin](#webfont-dl-vite-plugin)
1. 📊 [Benchmark](#benchmark)
1. 📚 [Resources](#resources)
1. 📄 [License](#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](#supported-webfont-providers) (e.g. [Google Fonts](https://fonts.google.com)) 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](#supported-webfont-providers) (e.g. [Google Fonts](https://fonts.google.com)) 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;
}
```
### 🔌 Laravel
To use with the [Laravel Vite Plugin](https://laravel.com/docs/vite), add this line to your Blade file:
```blade
@vite('webfonts.css')
```
### 📸 Screenshot
### 🧩 Supported webfont providers
- **[Google Fonts](https://fonts.google.com)**: works with [Zero config](#zero-config) or [Simple config](#simple-config)
- **[Bunny Fonts](https://bunny.net/fonts/)**: works with [Zero config](#zero-config) or [Simple config](#simple-config)
- **[Fontshare](https://www.fontshare.com)**: works with [Zero config](#zero-config) or [Simple config](#simple-config)
- **[Fira Code](https://github.com/tonsky/FiraCode)**, **[Hack](https://github.com/source-foundry/Hack)** fonts (`cdn.jsdelivr.net`): works with [Zero config](#zero-config) or [Simple config](#simple-config)
- **[Inter](https://rsms.me/inter/)** font (`rsms.me`): works with [Zero config](#zero-config) or [Simple config](#simple-config)
- *Any provider with CSS containing `@font-face` definitions works with [Simple config](#simple-config)*
### 🛠️ **Options**
- **`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 (`
