{"id":13417205,"url":"https://github.com/feat-agency/vite-plugin-webfont-dl","last_synced_at":"2025-05-16T10:08:17.811Z","repository":{"id":37468306,"uuid":"366086772","full_name":"feat-agency/vite-plugin-webfont-dl","owner":"feat-agency","description":"⚡ Webfont Download Vite Plugin - Effortlessly download and bundle webfonts in your Vite project. Enjoy privacy-first - even offline - development with persistent caching and non-render blocking font injection for optimal performance.","archived":false,"fork":false,"pushed_at":"2025-03-26T06:11:01.000Z","size":1835,"stargazers_count":340,"open_issues_count":6,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-06T23:42:52.042Z","etag":null,"topics":["fonts","google-fonts","googlefonts","laravel","laravel-vite","react","reactjs","svelte","vite","vite-plugin","vitejs","vue","vue-plugin","vuejs","vuejs3","web-fonts","webfont","webfonts","woff","woff2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/feat-agency.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-10T15:17:15.000Z","updated_at":"2025-05-05T18:08:33.000Z","dependencies_parsed_at":"2024-01-07T18:04:27.027Z","dependency_job_id":"c32c6564-43de-48df-b280-a7a69ccf75ea","html_url":"https://github.com/feat-agency/vite-plugin-webfont-dl","commit_stats":{"total_commits":155,"total_committers":7,"mean_commits":"22.142857142857142","dds":"0.19354838709677424","last_synced_commit":"fbac156180558a6ee842c84f72a7c8d204c646d3"},"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feat-agency%2Fvite-plugin-webfont-dl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feat-agency%2Fvite-plugin-webfont-dl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feat-agency%2Fvite-plugin-webfont-dl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feat-agency%2Fvite-plugin-webfont-dl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feat-agency","download_url":"https://codeload.github.com/feat-agency/vite-plugin-webfont-dl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509478,"owners_count":22082892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fonts","google-fonts","googlefonts","laravel","laravel-vite","react","reactjs","svelte","vite","vite-plugin","vitejs","vue","vue-plugin","vuejs","vuejs3","web-fonts","webfont","webfonts","woff","woff2"],"created_at":"2024-07-30T22:00:33.875Z","updated_at":"2025-05-16T10:08:12.797Z","avatar_url":"https://github.com/feat-agency.png","language":"TypeScript","funding_links":[],"categories":["Plugins","Pre-packed"],"sub_categories":["Framework-agnostic Plugins","Plugins"],"readme":"# 🔠 **Webfont Dowload** Vite plugin ⚡\n\n[![NPM](https://img.shields.io/npm/v/vite-plugin-webfont-dl)](https://www.npmjs.com/package/vite-plugin-webfont-dl)\n[![NPM downloads all-time](https://img.shields.io/npm/dt/vite-plugin-webfont-dl)](https://www.npmjs.com/package/vite-plugin-webfont-dl)\n[![NPM downloads last month](https://img.shields.io/npm/dm/vite-plugin-webfont-dl)](https://www.npmjs.com/package/vite-plugin-webfont-dl)\n\n\n**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.\n\n\u003cbr\u003e\n\n## 📦 Install \u003cspan name=\"install\"\u003e\u003c/span\u003e\n```bash\nnpm i vite-plugin-webfont-dl -D\n```\n\n\u003cbr\u003e\n\n## 📖 Table of Contents\n1. 📦 [Install](#install)\n1. Usage:\n\t* 😎 [Zero config \u003csub\u003e\u003csup\u003e[method A]\u003c/sub\u003e\u003c/sup\u003e](#zero-config)\n\t* 🦄 [Simple config \u003csub\u003e\u003csup\u003e[method B]\u003c/sub\u003e\u003c/sup\u003e](#simple-config)\n1. 🚀 [That's all!](#thats-all)\n\t* 🔌 [Laravel](#laravel)\n\t* 📸 [Screenshot](#screenshot)\n1. 🧩 [Supported webfont providers](#supported-webfont-providers)\n1. 🛠️ [Options](#options)\n1. ❓ [Third-party webfonts](#third-party-webfonts)\n1. 🔮 [How it works](#how-it-works)\n\t* 📉 [Google Fonts](#google-fonts)\n\t* 📈 [Webfont-DL Vite plugin](#webfont-dl-vite-plugin)\n1. 📊 [Benchmark](#benchmark)\n1. 📚 [Resources](#resources)\n1. 📄 [License](#license)\n\n\u003cbr\u003e\n\n## 😎 Usage: **Zero config** \u003csub\u003e\u003csup\u003e[method A]\u003c/sub\u003e\u003c/sup\u003e \u003cspan name=\"zero-config\"\u003e\u003c/span\u003e\n\n*Extracts, downloads and injects fonts from the **original Google Fonts code snippet**.*\n\n0. Select your font families in your [webfont provider](#supported-webfont-providers) *(e.g. [Google Fonts](https://fonts.google.com))* and copy the code into `\u003chead\u003e` from the ***\"Use on the web\"*** block:\n\t```html\n\t\u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n\t\u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n\t\u003clink href=\"https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400\u0026family=Roboto:wght@100\u0026display=swap\" rel=\"stylesheet\"\u003e\n\t```\n1. Add **`webfontDownload`** to your Vite plugins without any configuration and the plugin automagically will take care of everything:\n\t```js\n\t// vite.config.js\n\n\timport webfontDownload from 'vite-plugin-webfont-dl';\n\n\texport default {\n\t  plugins: [\n\t    webfontDownload(),\n\t  ],\n\t};\n\t```\n2. The original webfont tags will be replaced in `dist/index.html`:\n\t```html\n\t\u003cstyle\u003e@font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}...\u003c/style\u003e\n\t```\n\n\u003cbr\u003e\n\n## 🦄 Usage: **Simple config** \u003csub\u003e\u003csup\u003e[method B]\u003c/sub\u003e\u003c/sup\u003e \u003cspan name=\"simple-config\"\u003e\u003c/span\u003e\n\n*Extracts, downloads and injects fonts from the **configured webfont CSS URL(s)**.*\n\n0. Select your font families in your [webfont provider](#supported-webfont-providers) *(e.g. [Google Fonts](https://fonts.google.com))* and copy the **CSS URL**(s) from the ***\"Use on the web\"*** code block:\n\t```html\n\t\u003clink href=\"[CSS URL]\" rel=\"stylesheet\"\u003e\n\t```\n1. Add **`webfontDownload`** to your Vite plugins with the selected Google Fonts **CSS URL**(s):\n\t```js\n\t// vite.config.js\n\n\timport webfontDownload from 'vite-plugin-webfont-dl';\n\n\texport default {\n\t  plugins: [\n\t    webfontDownload([\n\t      'https://fonts.googleapis.com/css2?family=Press+Start+2P\u0026display=swap',\n\t      'https://fonts.googleapis.com/css2?family=Fira+Code\u0026display=swap'\n\t    ]),\n\t  ],\n\t};\n\t```\n\n\u003cbr\u003e\n\n## 🚀 That's all! \u003cspan name=\"thats-all\"\u003e\u003c/span\u003e\nThe webfonts are **injected and ready to use**.\u003cbr\u003e\nThe plugin does its job seamlessly whether you are working on local development server or building to production.\n\n```css\nh1 {\n  font-family: 'Press Start 2P', cursive;\n}\n\nh2 {\n  font-family: 'Fira Code', monospace;\n}\n```\n\n### 🔌 Laravel \u003cspan name=\"laravel\"\u003e\u003c/span\u003e\nTo make it work with [Laravel Vite Plugin](https://laravel.com/docs/vite) add this line to your blade file:\n```blade\n@vite('webfonts.css')\n```\n\n### 📸 Screenshot \u003cspan name=\"screenshot\"\u003e\u003c/span\u003e\n\u003cimg src=\"./img/terminal.png\" width=\"400\" /\u003e\n\n\u003cbr\u003e\n\n### 🧩 Supported webfont providers \u003cspan name=\"supported-webfont-providers\"\u003e\u003c/span\u003e\n- **[Google Fonts](https://fonts.google.com)**: works with [Zero config](#zero-config) or [Simple config](#simple-config)\n- **[Bunny Fonts](https://bunny.net/fonts/)**: works with [Zero config](#zero-config) or [Simple config](#simple-config)\n- **[Fontshare](https://www.fontshare.com)**: works with [Zero config](#zero-config) or [Simple config](#simple-config)\n- **[Fira Code](https://github.com/tonsky/FiraCode)**, **[Hack](https://github.com/source-foundry/Hack)** fonts (`cdn.jsdelivr.net`): works with [Zero config](#zero-config) or [Simple config](#simple-config)\n- **[Inter](https://rsms.me/inter/)** font (`rsms.me`): works with [Zero config](#zero-config) or [Simple config](#simple-config)\n- *any provider with CSS (containing `@font-face` definitions) works with [Simple config](#simple-config)*\n\n\u003cbr\u003e\n\n### 🛠️ **Options** \u003cspan name=\"options\"\u003e\u003c/span\u003e\n- **`injectAsStyleTag`** \u003csmall\u003e(`boolean`, default: `true`)\u003c/small\u003e:\u003cbr\u003e\n  Inject webfonts as `\u003cstyle\u003e` tag (embedded CSS) or as an external `.css` file\n\n- **`minifyCss`** \u003csmall\u003e(`boolean`, default: *value of* `build.minify`)\u003c/small\u003e:\u003cbr\u003e\n  Minify CSS code during build.\n\n- **`embedFonts`** \u003csmall\u003e(`boolean`, default: `false`)\u003c/small\u003e:\u003cbr\u003e\n  Embed base64-encoded fonts into css.\u003cbr\u003e\n  In some cases can cause filesize increase if css containes multiple references to same font file. [Example](https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700\u0026display=swap\u0026text=0123456789)\n\n- **`async`** \u003csmall\u003e(`boolean`, default: `true`)\u003c/small\u003e:\u003cbr\u003e\n  Prevent the usage of inline event handlers (`webfonts.css`) that can cause Content Security Policy issues.\u003cbr\u003e\n  Works only with **`injectAsStyleTag:false`**.\n\n- **`cache`** \u003csmall\u003e(`boolean`, default: `true`)\u003c/small\u003e:\u003cbr\u003e\n  Persistently store downloaded css and font files in local file cache.\u003cbr\u003e\n  If set to `false` the existing cache will be deleted.\n\n- **`proxy`** \u003csmall\u003e(`false|AxiosProxyConfig`, default: `false`)\u003c/small\u003e:\u003cbr\u003e\n  [Proxy configuration](https://axios-http.com/docs/req_config) for network requests.\n\n- **`assetsSubfolder`** \u003csmall\u003e(`string`, default: `''`)\u003c/small\u003e:\u003cbr\u003e\n  Moves downloaded font files to separate subfolder in assets directory.\n\n*usage:*\n\n```js\nViteWebfontDownload(\n  [],\n  {\n    injectAsStyleTag: true,\n    minifyCss: true,\n    embedFonts: false,\n    async: true,\n    cache: true,\n    proxy: false,\n    assetsSubfolder: '',\n  }\n)\n```\n\n*or:*\n\n```js\nViteWebfontDownload(\n  [\n    'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700\u0026display=swap',\n  ],\n  {\n    injectAsStyleTag: true,\n    minifyCss: true,\n    embedFonts: false,\n    async: true,\n    cache: true,\n    proxy: false,\n    assetsSubfolder: '',\n  }\n)\n```\n\n\u003cbr\u003e\n\n### ❓ Third-party webfonts \u003cspan name=\"third-party-webfonts\"\u003e\u003c/span\u003e\n\n⚠️ Using the standard method to add third-party webfonts ([Google Fonts](https://fonts.google.com), [Bunny Fonts](https://bunny.net/fonts/) or [Fontshare](https://www.fontshare.com)) 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.\n\n📈 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**.\n\n⚙️ 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. 🤩\n\n🔐 In addition to the significant **performance increase**, your visitors will also benefit to **privacy protection**, since there is no third-party server involved.\n\n\u003cbr\u003e\n\n## 🔮 How it works \u003cspan name=\"how-it-works\"\u003e\u003c/span\u003e\n\n### 📉 **Google Fonts** \u003cspan name=\"google-fonts\"\u003e\u003c/span\u003e\n\n**Google Fonts** generates the following code which you have to inject into your website's `\u003chead\u003e`, *example*:\n\n```html\n\u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n\u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n\u003clink href=\"https://fonts.googleapis.com/css2?family=Fira+Code\u0026display=swap\" rel=\"stylesheet\"\u003e\n```\n\n📱 What happens on **client-side** with **Google Fonts**:\n1. 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`**]\n1. Second line is another preconnect hint to `fonts.gstatic.com`. [**`preconnect`**]\n1. Third line instructs the browser to load and use a CSS stylesheet file from `fonts.googleapis.com` *(with [`font-display:swap`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#values))*. [**`stylesheet`**]\n1. 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.\n1. The browser starts to download the all relevant fonts from `fonts.gstatic.com`.\n1. After the successful fonts download the browser swaps the fallback fonts to the downloaded ones.\n\n### 🆚\n\n### 📈 **Webfont-DL** Vite plugin \u003cspan name=\"webfont-dl-vite-plugin\"\u003e\u003c/span\u003e\n\nOn the contrary, **Webfont-DL plugin** does most of the job at build time, leaves the minimum to the browser.\n\n**Webfont-DL plugin**\n- collects the webfont CSS URLs (from plugin config, `index.html` and the generated CSS)\n- downloads the webfont CSS file(s)\n- extracts the font URLs\n- downloads the fonts\n- adds the fonts to the bundle\n- generates an embedded CSS (`\u003cstyle\u003e` tag) **or** a webfont / external CSS file\n- add them to the bundle and injects the following code into your website's `\u003chead\u003e` using a non-render blocking method, *example*:\n\n```html\n\u003cstyle\u003e\n  @font-face {\n    font-family: 'Fira Code';\n    font-style: normal;\n    font-weight: 300;\n    font-display: swap;\n    src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');\n    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n  }\n  ...\n\u003c/style\u003e\n```\n**or** *(using dev server or `injectAsStyleTag: false` option)*\n\n```html\n\u003clink rel=\"preload\" as=\"style\" href=\"/assets/webfonts.b904bd45.css\"\u003e\n\u003clink rel=\"stylesheet\" media=\"print\" onload=\"this.onload=null;this.removeAttribute('media');\" href=\"/assets/webfonts.b904bd45.css\"\u003e\n```\n\n📱 What happens on **client-side** with **Webfont-DL plugin**:\n\n1. Load fonts from the embedded CSS (`\u003cstyle\u003e` tag).\n\n**or**\n\n1. First line instructs the browser to prefetch a CSS file for later use as stylesheet. [**`preload`**]\n1. 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`**]\n\n\n\u003cbr\u003e\n\n## 📊 Benchmark \u003cspan name=\"benchmark\"\u003e\u003c/span\u003e\n[Starter Vite project](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla) with\n\n| [▶️ Standard **Google Fonts**](https://web.dev/measure/?url=https%3A%2F%2Fwebfont.feat.agency%2F) | 🆚 | [▶️ **Webfont DL** Vite plugin](https://web.dev/measure/?url=https%3A%2F%2Fwebfont-dl.feat.agency%2F) |\n|:---:|:---:|:---:|\n| [🔗 webfont.feat.agency](https://webfont.feat.agency) | | [🔗 webfont-dl.feat.agency](https://webfont-dl.feat.agency) |\n\n![Compare](./img/compare.png)\n\n\u003cbr\u003e\n\n## 📚 Resources \u003cspan name=\"resources\"\u003e\u003c/span\u003e\n* [Page Speed Checklist / Fix \u0026 Eliminate Render Blocking Resources](https://pagespeedchecklist.com/eliminate-render-blocking-resources)\n\n\u003cbr\u003e\n\n## 📄 License \u003cspan name=\"license\"\u003e\u003c/span\u003e\n\nMIT License © 2022 [feat.](https://feat.agency)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeat-agency%2Fvite-plugin-webfont-dl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeat-agency%2Fvite-plugin-webfont-dl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeat-agency%2Fvite-plugin-webfont-dl/lists"}