🔌 Webfont DL - Vite plugin ⚡

Make your Vite site load faster & boost SEO performance 🚀

⚠️ Using the standard method to add Google Fonts into a webpage can slow down page load significantly. Lighthouse and PageSpeed Insights audit calls this a "render-blocking resource", which means that the page can't load until the font has been fetched from the Google Fonts server.

📈 By avoiding render-blocking resources caused by Google Fonts loading, you can boost page performance which leads to better user-experience and improves SEO results. 🔎

Eliminate Render-Blocking Resources caused by Google Fonts 🔝

💡 Webfont-DL plugin let's you leverage the flexibility of Google Fonts without trade-offs when it comes to page perfomance.

⚙️ The plugin downloads the given fonts from Google Fonts and dynamically injects them into your Vite project.

📦 Install

npm i vite-plugin-webfont-dl -D

😎 Usage: Zero config

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

Select your font families at Google Fonts and copy the code into <head> from the "Use on the web" block:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap" rel="stylesheet">

Add ViteWebfontDownload to your Vite plugins without any configuration and the plugin automagically will take care of everything:

// vite.config.js

import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';

export default {
  plugins: [
    ViteWebfontDownload(),
  ],
};

🦄 Usage: Simple config

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

Select your font families at Google Fonts and copy the CSS URL(s) from the "Use on the web" code block:
```
<link href="[CSS URL]" rel="stylesheet">
```

Add ViteWebfontDownload to your Vite plugins with the selected Google Fonts CSS URL(s):

// vite.config.js

import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';

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

🚀 That's all!

From here the fonts are injected and available globally. Plugin works seamlessly even when working on local development server.

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

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

📈 Benchmark

Starter Vite project with

▶️ Standard Google Fonts	🆚	▶️ Webfont DL Vite plugin
🔗 webfont.feat.agency		🔗 webfont-dl.feat.agency

🔮 How it works

Google Fonts 📉

Google Fonts generates the following code which you have to inject into your website's <head> (example):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">

📱 What happens on client-side with Google Fonts:

First line gives a hint to the browser to begin the connection handshake (DNS, TCP, TLS) with fonts.googleapis.com. This happens in the background to improve performance. [preconnect]
Second line is another preconnect hint to fonts.gstatic.com. [preconnect]
Third line instructs the browser to load and use a CSS stylesheet file from fonts.googleapis.com (with font-display:swap). [stylesheet]
The browser downloads the CSS file and starts to parse it. The parsed CSS is a set of @font-face definitions containing font URLs from fonts.gstatic.com server.
The browser starts to download the all relevant fonts from fonts.gstatic.com.
After the successful fonts download the browser swaps the fallback fonts to the downloaded ones.

🆚