vite-plugin-webfont-dl

Vite plugin for downloading and injecting webfonts

Usage no npm install needed!

<script type="module">
  import vitePluginWebfontDl from 'https://cdn.skypack.dev/vite-plugin-webfont-dl';
</script>

README

🔌 Webfont DL - Vite plugin ⚡

NPM NPM downloads

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

  1. 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">
  2. 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

Compare

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

  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 📈

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

Webfont-DL plugin downloads the Google Fonts CSS file(s), extracts the font URLs, downloads the fonts, generates a webfont CSS file, add them to the bundle and injects the following code into your website's <head> using a non-render blocking method (example):

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

📚 Resources

📄 License

MIT License © 2022 feat.