Newbie Paintball Master

    vite-plugin-webfont-dl
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    🔌 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: Zero config

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

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

    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.

    Install

    npm i vite-plugin-webfont-dl

    DownloadsWeekly Downloads

    1,642

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    28 kB

    Total Files

    6

    Last publish

    Collaborators

    • feat.agency