Home

Awesome

🔠 Webfont Dowload Vite plugin ⚡

NPM NPM downloads

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.

<br>

📦 Install <span name="install"></span>

npm i vite-plugin-webfont-dl -D
<br>

📖 Table of Contents

  1. 📦 Install
  2. Usage:
  3. 🚀 That's all!
  4. 🧩 Supported webfont providers
  5. 🛠️ Options
  6. ❓ Third-party webfonts
  7. 🔮 How it works
  8. 📊 Benchmark
  9. 📚 Resources
  10. 📄 License
<br>

😎 Usage: Zero config <sub><sup>[method A]</sub></sup> <span name="zero-config"></span>

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

  1. Select your font families in your webfont provider (e.g. 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">
  2. 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(),
  ],
};
  3. The original webfont tags will be replaced in dist/index.html: 
    <style>@font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}...</style>
<br>

🦄 Usage: Simple config <sub><sup>[method B]</sub></sup> <span name="simple-config"></span>

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

  1. Select your font families in your webfont provider (e.g. Google Fonts) and copy the CSS URL(s) from the "Use on the web" code block: 
    <link href="[CSS URL]" rel="stylesheet">
  2. 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'
    ]),
  ],
};
<br>

🚀 That's all! <span name="thats-all"></span>

The webfonts are injected and ready to use.<br> 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 <span name="laravel"></span>

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

@vite('webfonts.css')

📸 Screenshot <span name="screenshot"></span>

<img src="./img/terminal.png" width="400" /> <br>

🧩 Supported webfont providers <span name="supported-webfont-providers"></span>

<br>

🛠️ Options <span name="options"></span>

usage:

ViteWebfontDownload(
  [],
  {
    injectAsStyleTag: true,
    minifyCss: true,
    async: true,
    cache: true,
    proxy: false,
  }
)

or:

ViteWebfontDownload(
  [
    'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap',
  ],
  {
    injectAsStyleTag: true,
    minifyCss: true,
    async: true,
    cache: true,
    proxy: false,
  }
)
<br>

❓ Third-party webfonts <span name="third-party-webfonts"></span>

⚠️ Using the standard method to add third-party webfonts (Google Fonts, Bunny Fonts or Fontshare) 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.

<br>

🔮 How it works <span name="how-it-works"></span>

📉 Google Fonts <span name="google-fonts"></span>

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:

  1. 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]
  2. Second line is another preconnect hint to fonts.gstatic.com. [preconnect]
  3. Third line instructs the browser to load and use a CSS stylesheet file from fonts.googleapis.com (with font-display:swap). [stylesheet]
  4. 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.
  5. The browser starts to download the all relevant fonts from fonts.gstatic.com.
  6. After the successful fonts download the browser swaps the fallback fonts to the downloaded ones.

🆚

📈 Webfont-DL Vite plugin <span name="webfont-dl-vite-plugin"></span>

On the contrary, Webfont-DL plugin does most of the job at build time, leaves the minimum to the browser.

Webfont-DL plugin

<style>
  @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  ...
</style>

or (using dev server or injectAsStyleTag: false option)

<link rel="preload" as="style" href="/assets/webfonts.b904bd45.css">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="/assets/webfonts.b904bd45.css">

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

  1. Load fonts from the embedded CSS (<style> tag).

or

  1. First line instructs the browser to prefetch a CSS file for later use as stylesheet. [preload]
  2. Second line instructs the browser to load and use that CSS file as a "print" stylesheet (non-render blocking). After loading it promote to "all" media type stylesheet (by removing the "media" attribute). [stylesheet]
<br>

📊 Benchmark <span name="benchmark"></span>

Starter Vite project with

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

Compare

<br>

📚 Resources <span name="resources"></span>

<br>

📄 License <span name="license"></span>

MIT License © 2022 feat.