🔌 Webfont DL - Vite plugin ⚡

📦 Install

npm i vite-plugin-webfont-dl -D

😎 Usage: Zero config _{^{[method 🅰️]}}

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 webfontDownload to your Vite plugins without any configuration and the plugin automagically will take care of everything:

// vite.config.js

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

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

🦄 Usage: Simple config _{^{[method 🅱️]}}

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 webfontDownload to your Vite plugins with the selected Google Fonts CSS URL(s):

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

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

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

Laravel

To make it work with Laravel Vite Plugin add this line to your blade file:

@vite('webfonts.css')

Screenshot

❓ Third-party webfonts

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

📈 By avoiding render-blocking resources caused by third-party webfonts, you can boost page performance which leads to better user-experience and it improves SEO results.

⚙️ The plugin downloads the given 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 the third-party webfonts into self-hosted ones. 🤩

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

Supported webfont providers:

Google Fonts: works with Zero config or Simple config
Bunny Fonts: works with Zero config or Simple config
Any provider with CSS (containing font definitions): works with Simple config

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

🆚