# 🔠 **Webfont Dowload** 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)
**Collects webfont links, imports and definitions** from your Vite project, **downloads** css and font files ***(privacy-first)***, add the fonts to your **bundle** *(or serves through dev server)*, and **injects** font definitions using a **non-render blocking method**, meanwhile stores external css and font files 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**.*
0. Select your font families in your [webfont provider](#supported-webfont-providers) *(e.g. [Google Fonts](https://fonts.google.com))* and copy the code into `` from the ***"Use on the web"*** block:
```html
```
1. Add **`webfontDownload`** to your Vite plugins without any configuration and the plugin automagically will take care of everything:
```js
// vite.config.js
import webfontDownload from 'vite-plugin-webfont-dl';
export default {
plugins: [
webfontDownload(),
],
};
```
2. 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)**.*
0. Select your font families in 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
```
1. 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 does its job seamlessly whether you are working on local development server or building to production.
```css
h1 {
font-family: 'Press Start 2P', cursive;
}
h2 {
font-family: 'Fira Code', monospace;
}
```
### 🔌 Laravel
To make it work with [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 `
```
**or** *(using dev server or `injectAsStyleTag: false` option)*
```html
```
📱 What happens on **client-side** with **Webfont-DL plugin**:
1. Load fonts from the embedded CSS (`
