feat-agency / vite-plugin-webfont-dl Goto Github PK

View Code? Open in Web Editor NEW

257.0 6.0 10.0 1.77 MB

⚡ Webfont Download Vite Plugin - Make your Vite site load faster

License: MIT License

TypeScript 100.00%

vite google-fonts webfonts vue react vite-plugin vue-plugin vitejs vuejs vuejs3

vite-plugin-webfont-dl's People

Contributors

Stargazers

Watchers

Forkers

borkeszmate andrewyhuang leodog896 nstringham andrianbalanescu ndinhbang rigby90 ictserv karthik-js bopazyn serdjan

vite-plugin-webfont-dl's Issues

Fonts are loaded in development but failing on build

It seems that there's a problem (At least with Chrome) when the project is built.

The resource xxx.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

It seems that adding rel="stylesheet preload" instead of rel="preload" at this line solves the problem.

Error: ENAMETOOLONG

I'm trying to implement this plugin but I get following error on build:

Error: ENAMETOOLONG: name too long, open '/workspaces/ZSM TimeTable Remastered/dist/assets/KFOlCnqEu92Fr1MmWUlvBgWiKOPUvaFiVlWbMWgtUADtbNE0F3PS6kya0xphlyZ8mDc6o4iQFKK5F3VtZ5PdjfZ_8WTjahT6xxR7j2h3bRSa7eyYwKotUoNKq6EbiFJFNtx-MlRaH0Pbyi9IAKm4b4tC1at0vpVnWrmBWbBATH43zlZ1M1pr8P3LlT2EmqG8uoFcoUYwBiRBfsH63m446w06pvPmdmvFfakXe2vboUxl5MrTwUVLmEjibRkXBdlwaP_0XgZ0MyYPHHQOoCP8K4uphim2aip_prwVU_F_0BqgljLd2QBzVBkThQSLR9fhM5Q2lRNXGYL5GuOC5XYhYy7aPm_jrMRwKRvb8AUCcO_XlCphU0WeWe2aIGmgzPQPdqo9D97QYlu6k1Luj6ieFHEm-BYxvyBtr.woff2'

This is the font url: https://fonts.googleapis.com/css2?display=swap&text=0123456789aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ%C4%85%C4%84%C4%87%C4%86%C4%99%C4%98%C5%82%C5%81%C5%84%C5%83%C3%B3%C3%93%C5%9B%C5%9A%C5%BA%C5%B9%C5%BC%C5%B9.%28%29%2C%2F%22-%26%3A&family=Roboto+Condensed:wght@400;700&family=Roboto:wght@400;700

I'm using text parameter to decrease font size and without it everything works propertly.

webfont-dl not caching fonts

I'm using vite-plugin-webfont-dl on a vite + vue3 project but it seems that fonts aren't caching when i'm using the plugin
here's a deployment without vite-plugin-webfont-dl:

https://vue-blog-ddx2qgapj-simplyvoid.vercel.app/

and here with vite-plugin-webfont-dl:

https://simplyvoid.vercel.app

refresh to see the difference..

"protocol mismatch" when set `HTTPS_PROXY` to socks5 protocl

Below is my font config

...
webfontDownload([
  'https://fonts.googleapis.com/css2?family=Bitter&family=Noto+Serif+SC&display=swap',
]),
...

When I use socks5 proxy:

HTTPS_PROXY=socks5://192.168.50.161:10808 pnpm build

> [email protected] build /home/alkaid/source/QSync
> vue-tsc && vite build

vite v4.0.4 building for production...
✓ 72 modules transformed.
rendering chunks (1)...node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

AssertionError [ERR_ASSERTION]: protocol mismatch
    at Object.request (/home/alkaid/source/QSync/node_modules/.pnpm/[email protected]/node_modules/follow-redirects/index.js:521:14)
    at dispatchHttpRequest (file:///home/alkaid/source/QSync/node_modules/.pnpm/[email protected]/node_modules/axios/lib/adapters/http.js:414:21)
    at new Promise (<anonymous>)
    at http (file:///home/alkaid/source/QSync/node_modules/.pnpm/[email protected]/node_modules/axios/lib/adapters/http.js:122:10)
    at Axios.dispatchRequest (file:///home/alkaid/source/QSync/node_modules/.pnpm/[email protected]/node_modules/axios/lib/core/dispatchRequest.js:51:10)
    at Axios.request (file:///home/alkaid/source/QSync/node_modules/.pnpm/[email protected]/node_modules/axios/lib/core/Axios.js:142:33)
    at Function.wrap [as request] (file:///home/alkaid/source/QSync/node_modules/.pnpm/[email protected]/node_modules/axios/lib/helpers/bind.js:5:15)
    at CssLoader.load (file:///home/alkaid/source/QSync/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-webfont-dl/dist/index.js:46:34)
    at CssLoader.loadAll (file:///home/alkaid/source/QSync/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-webfont-dl/dist/index.js:19:30)
    at downloadWebfontCss (file:///home/alkaid/source/QSync/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-webfont-dl/dist/index.js:431:37) {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: 'socks5:',
  expected: 'http:',
  operator: '=='
}

Node.js v19.6.0

Only injects into one html file.

If you have a build that creates multiple html output files then this plugin will only inject the style / css link tag into the last one it sees.

In a real project this happens with a plugin scraping your source files for e.g. a foo.page.tsx and generating an entry from a template html file, but you can reproduce the issue with the simple manual config:

import { defineConfig } from "vite";
import { viteWebfontDl } from "vite-plugin-webfont-dl";

export default defineConfig({
    build: {
        rollupOptions: {
            input: {
                index: "index.html",
                other: "other.html",
            },
        },
    },
    plugins: [
        viteWebfontDl([
            "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap",
        ])
    ],
});

This is due to the plugin storing only a indexHtmlContent/Path in transformIndexHtml() and updating it in generateBundle(), but this config will fire the transformIndexHtml() for every input html file (despite the name) first.

Q: It downloads the font in each build?

Hello!

I'm checking this plugin to use in my project, but I can see each time the build is launched download all the fonts time after time. Is it right?

If so, do you plan to implement a possible cache?

Thanks!

[FR] respect manifest setting

I am having a setup, where the entry point is not a static index.html but a server generated file. (Craft CMS).

To make that work, I am using the manifest setting of Vite

    build: {
        emptyOutDir: true,
        manifest: true,
        outDir: '../web/static/',
    },

That generated a file like this:

{
  "index.html": {
    "file": "assets/index.c18ecf21.js",
    "src": "index.html",
    "isEntry": true,
    "css": [
      "assets/index.079e947d.css"
    ]
  }
}

I would love to see the generated webfont.css in the css-index too, like:

{
  "index.html": {
    "file": "assets/index.c18ecf21.js",
    "src": "index.html",
    "isEntry": true,
    "css": [
      "assets/index.079e947d.css",
      "assets/webfonts.e0bb4bd3.css"
    ]
  }
}

Is that somehow already possible? If not, I would like to submit a feature request for it.

Sveltekit support

This plugin does not work with sveltekit!

Here's a stackblitz repro

Please run npm run build && npm run preview

[feature] unplugin support

[Question] How do i use this in atomic-css design?

hi, is there any way to use it in atomic css design like tailwindcss/windicss/unocss?

Or i must do it manually like official example:

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

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

Many thanks!

Disable logging for cached fonts

Currently, the plugin will write a line to the log every time it serves a font - even if it will be fetched from the file cache. This feels a bit verbose in my opinion. I'd like to suggest only logging the first time a webfont file is fetched from its origin, and maybe introduce debug logging with more specific log messages.
Would you accept a PR that achieves this?

Support for variable fonts?

I am using Inter CSS Variable font, so that I get access to everything in one go, as per documentation here - https://rsms.me/inter/#variable. I am unable to get it to work though, and the only way I can make it work is by going the Google Font route, meaning I have to pick which specific styles for this font to use, which is not ideal.

Am I doing something wrong or Variable fonts are not supported? If the latter, is it possible to make it work?

[Feature Request] Embed fonts inline using base64

Hey,

I have a project where I need to bundle all code of the web app into a single index.html file. I'd like to use this plugin. Instead of bundling the fonts as separate assets, we can base64 them and put them directly into the style tag / font face definition.

Do you think that'd be possible? Thanks in advance for the response 🌟

cssContent.replaceAll issue

Hello.
I have this setup in my project
index.html
...

<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=Montserrat:wght@400;600&family=Open+Sans:wght@400;700&display=swap"
            rel="stylesheet"
        />

...
And a standard setup of the plugin.
However when running "serve" I get the following issue:
[webfont-dl] https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Open+Sans:wght@400;700&display=swap[webfont-dl] cssContent.replaceAll is not a function
Can you tell me if there is something I'm doing wrong?

Thanks

Typescript declaration file?

Error:

Could not find a declaration file for module 'vite-plugin-webfont-dl'. 'C:/.../node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-webfont-dl/dist/vite-plugin-webfont-dl.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/vite-plugin-webfont-dl` if it exists or add a new declaration (.d.ts) file containing `declare module 'vite-plugin-webfont-dl';

`vite.config.ts`

import { UserConfig } from "vite";
...
import { ViteWebfontDownload } from "vite-plugin-webfont-dl";
const config: UserConfig = {
...
    ViteWebfontDownload([
      "https://fonts.googleapis.com/css2?family=Raleway&display=swap",
      "https://fonts.googleapis.com/css2?family=Open+Sans&display=swap",
    ]),
...
};
export default config;

Cab we enable CORS for webfonts.css?

I ran into an issue where I need to fetch the webfonts.css using axios, but it looks like the plugin does not add any CORS headers, resulting in Access to XMLHttpRequest at 'https://site.test:5173/webfonts.css' from origin 'https://site.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. error.

Interestingly, when serving font files, this plugin does add the Access-Control-Allow-Origin: * header, but not when serving the CSS file.

Is this for a reason, or would it be possible to add the same header when serving the CSS file?

FWIW, here's the confioguration I use:

webfontDownload([
    'https://fonts.bunny.net/css2?family=Lato:wght@400;600;700&display=swap',
    'https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap',
    'https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@300;400;500;600;700&display=swap',
])

I tried using the following options, but these had no effect on this issue:

{
    injectAsStyleTag: false,
    embedFonts: true,
}

Material Symbols are incorrectly loaded

The plugin doesn't load the Material Symbols correctly. The problem arises because the user agent is set to Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36 in the downloader.ts and the plugin loads multiple font faces but it should load only a single font face. If user agent which contains Chrome/77 is used, the issue is gone.

Font URL: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=swap

The same applies for the Rounded and the Sharp variants.

Expected behavior

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/@webfonts/{filename}.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Actual behavior

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHeej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDDxHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 500;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCdHOej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 600;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDBxG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1t-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url(/@webfonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

[Feature Request] crossorigin option for generated link tag

I have a case where the browser loads woff2 files more than once on refresh from the generated link tag. Since manually setting the crossorigin attribute fixes it, and I generate the index.html dynamically, it will be great to have it as a configuration option with the following type signature:

crossorigin: boolean | 'anonymous' | 'use-credentials'

~~When set it should generate:~~

~~boolean~~

<link rel="preload" as="style" href="/path/to/webfonts-[hash].css" crossorigin />
<link rel="stylesheet" href="/path/to/webfonts-[hash].css" />

~~anonymous~~

<link rel="preload" as="style" href="/path/to/webfonts-[hash].css" crossorigin="anonymous" />
<link rel="stylesheet" href="/path/to/webfonts-[hash].css" />

~~use-credentials~~

<link rel="preload" as="style" href="/path/to/webfonts-[hash].css" crossorigin="use-credentials" />
<link rel="stylesheet" href="/path/to/webfonts-[hash].css" />

Edit: the crossorigin attribute generated warnings and after further investigation my case of fonts loaded multiple times is due to the different fonts weights, so this feature is not needed. Leaving this here if someone else stumbles upon this case.

SvelteKit support?

I've tried to use vite-plugin-webfont-dl in my SvelteKit project, but nothing seems to be injected. The /webfonts.css route is created and does work, but there are no <link> elements added to <head> or any CSS @import statements.

Allow customising or disabling inline JavaScript.

Using inline event handlers with CSP is problematic, because for now Firefox and Safari do not support unsafe-hashes, that leaves only unsafe-inline. If user could control the Javascript, or in this case completely disable it, they could add Javascript event listeners inside their own scripts, while keeping CSP strict.

[Feature Request/BUG] Does not work if vite project does not use a .html file

I checked the code and it seems you're dependent on the transformIndexHtml hook - sadly this hook doesn't seem to be fired when one is using vite in a project without a .html index file - for example a Laravel 9 project using Vite (as it's the standard now).

Maybe it should be configurable which hook it uses? Or maybe use a different hook to generate the CSS file (if possible) and later stitch it together with the HTML file?

As of right now, this project doesn't seem usable in projects which don't use a index.html file as the transformIndexHtml seems to be never called

Failed request with fontshare font downloads

I am getting a request error when I try to download Fontshare fonts using this plugin in my sveltekit project.

This is my exact vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite';
import Icons from 'unplugin-icons/vite';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import webfontDownload from 'vite-plugin-webfont-dl';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: [
          'node_modules/@bulvar/bulma',
          'node_modules/@bulvar/bulma/sass',
        ],
      },
    },
  },
  plugins: [
    sveltekit(),
    Icons({
      compiler: 'svelte',
    }),
    webfontDownload([
      'https://api.fontshare.com/v2/css?f[]=synonym@1&display=swap',
      'https://api.fontshare.com/v2/css?f[]=chillax@1&display=swap',
    ]),
    ViteImageOptimizer(),
  ],
  test: {
    include: ['src/**/*.{test,spec}.{js,ts}'],
  },
});

I've also tried:

export default defineConfig({
  plugins: [
    webfontDownload([
      'https://api.fontshare.com/v2/css?f[]=synonym@1&f[]=chillax@1&display=swap',
    ]),
  ]
})

And I tried placing <link /> tags in my source as well with no luck.

I can try and get to the bottom of this when I have some time, but maybe it is more obvious to someone already working on it.

configure output file name?

This hash is a problem, can we have a function to customize this file name, it changes if we have more or less fonts.

<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">

Error [ERR_REQUIRE_ESM] with vite/3.1.5 darwin-x64 node-v16.17.1

Hi :)

I'm a weirdo and I like to keep my very few npm pkgs/dependencies up to date.

I've just updated Vite to 3.1.5 and now I get this error when running vite with npm run dev. You may want to look into it, going forward. It seems a pretty easy fix and a breaking change with Vite from now on.

failed to load config from /Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/vite.config.js
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/node_modules/vite-plugin-webfont-dl/dist/index.mjs not supported.
Instead change the require of /Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/node_modules/vite-plugin-webfont-dl/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/vite.config.js:33:37)
    at Object._require.extensions.<computed> [as .js] (file:///Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:63524:24)
    at loadConfigFromBundledFile (file:///Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:63532:21)
    at loadConfigFromFile (file:///Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:63400:34)
    at async resolveConfig (file:///Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:63017:28)
    at async createServer (file:///Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:62083:20)
    at async CAC.<anonymous> (file:///Users/gacallea/ProjectsandIdeas/Sites/gacallea.info/node_modules/vite/dist/node/cli.js:700:24)

cheers and thank you for this amazing plugin :)

Text property breaks things

if you include the text property it doesn't work

ViteWebfontDownload(["https://fonts.googleapis.com/css?family=Roboto&text=abcdefghijklmnopqrstuvwxyz"])

instead it just outputs this

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4H5VYlVeTqSU8uAnERDYbDdwE0WqKZJ5WD7r0XU&skey=a0a0114a1dcab3ac&v=v30) format('woff2');
}

connect ETIMEDOUT

Hello, first of all, thank you very much for the plugin, it has been very functional for me.

For the past three days, I have been experiencing this issue:

Apparently, this IPv6 address belongs to Chilean Google servers (I assume that it is trying to download the fonts from there due to Google's global load balancer, I´m in Perú).

A ping to this ip shows this:

and in the DevTools, chrome is showing this:

The application works normally, but the fonts aren't loading. I haven't made any changes, I just resumed development and this issue appeared, I assume that the issue is not directly related to the plugin, but rather with not being able to find the font host in the service.

I am using:

Node v18.25.0
React v18.2.0
Vite v4.2.1

Thanks.

`MIME type ('') is not a supported stylesheet` error in Vite development-mode

If I use the library in vite's dev-mode, the following error is thrown in the browser and therefor won't load the webfont.css file: Refused to apply style from 'https://domain.com/@webfonts/webfonts.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

It is working in production mode though.
The files are available and can be loaded by calling the URL directly.
I'm using the versions [email protected] and [email protected].

These are the request-headers in development-mode:

Compared to those in production-mode:

a7d0982.png">

Does this sound familiar?

Support for CDN's which use relative URLS

It seems it breaks when relative urls are used, as an example: https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css
Uses a relative url to the font files like url("../fonts/materialdesignicons-webfont.eot?v=7.0.96") which seems to break as the full relative path is just copied over to the webfonts.css - but vite than fails to load these - at least during HMR

Question: Bad web vitals with the vite plugin?

Hi feat-agency,

first I would like to thank you for this nice plugin. I currently build my website with Qwik and use your plugin since in Germany it is not allowed to talk to the Google CDN from a public website.

Unfortunately I recognized that the web vitals are not that good with it. Is there a reason why so many different woff files are attached to the build?

The website is just a preview but you can check it here:

https://pagespeed.web.dev/analysis/https-preview-zankel-engineering-pages-dev/i7ouid2n3u?hl=DE&form_factor=mobile
and here
https://www.debugbear.com/test/website-speed/7eemCpD4/requests

Is there any possibility to optimize this behaviour? The LCP gets bad for that reason.

Thanks in advance.

Sebastian

[Feature Request] Adobe TypeKit Support

Adobe TypeKit fonts are not currently supported.

Regression when using "type": "module" in package.json in 3.7.1

Latest release introduced an unhandled error when package.json is set to ECMAScript modules mode.

this.cacheDir = resolve(__dirname, "../.cache/");
ReferenceError: __dirname is not defined in ES module scope

Demo:

support subset parameter

I have

    <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=Dosis:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap&subset=latin,latin-ext" rel="stylesheet">

vite-plugin-webfont-dl injects into index.html also definition for other subsets like vietnamese, cyrillic-ext, etc.

Injected should be only definition for latin and latin-ext definitions.

Thank you.

"connect ETIMEDOUT <Google IP>" in development

Since a few days, sometimes the development server will be unresponsive when starting. After a minute or so, the log shows entries like this:

8:37:08 AM [vite] Internal server error: connect ETIMEDOUT 2a00:1450:400e:801::200a:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)
8:37:08 AM [vite] Internal server error: connect ETIMEDOUT 2a00:1450:400e:801::200a:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16) (x2)
9:40:51 AM [vite] Internal server error: connect ETIMEDOUT 2a00:1450:4001:830::200a:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)

Doing a reverse IP lookup, I found the IP points to ams15s22-in-x0a.1e100.net, with 1e100.net hinting to a Google server, so I suspected the web fonts plugin.
When I disable it, the error still shows up in the log, but the application builds and runs just fine.

So, my suspicion is this is related to the preload link tags in the index.html. As I don't really know how Vite works -- does the webfont plugin add link preloading, or does Vite do that on its own? Why is the timeout for the request so high, and why is there a crucial dependency on those requests?
I also tried enabling verbose and debug logging, but couldn't get any stack trace deeper than the one shown above. Do you have any idea whether the error could be related to web fonts, or how to debug this more efficiently?

Missing CSS in production because `indexHtmlPath` isn't correctly stripped

I'm having trouble with the production build when the public-base-path of vite isn't the default one. The style-tag nor the CSS file (if injectAsStyleTag is false) is injected. It works fine if I use the default base config in my vite.config.js.

I had a look at the code and saw that there is a replace of the path for the indexHtmlPath variable which on default replaces the trailing / of the index.html path, but won't replace it properly if the base isn't just /.
https://github.com/feat-agency/vite-plugin-webfont-dl/blob/master/src/index.ts#L285

The generateBundle method then won't find the index.html file in the bundle array:
https://github.com/feat-agency/vite-plugin-webfont-dl/blob/master/src/index.ts#L312

Any experience with that – shouldn't this be considered?

Vite 3 support?

Hi! I'm having problems with Vite v3.

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^2" from [email protected]
npm ERR! node_modules/vite-plugin-webfont-dl
npm ERR!   dev vite-plugin-webfont-dl@"*" from the root project```

Thanks for the help!

read: ECONNRESET

Hello!

Sometimes there is a read: ECONNRESET error, what should I do?

Pastebin with logs:
https://pastebin.com/S7DWSZ9P

Url is correct.

No config, google fonts included via link:css (variant a from readme).

404 when font file contains hyphen

when the name on the woff2 file contains a - vite-plugin-webfont-dl will attempt to download only the part of the URL that comes before the -

take this for example

webfontDownload(
  ["https://fonts.googleapis.com/css2?family=Roboto&text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"]
),

this CSS file contains this URL

https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4H57QnV-boS00sAHMTD4TBdQM2WKCbJZeB7L8VW_9D9CuglRuxIdhqutK5-aMlJIRL7yoO9k6A&skey=a0a0114a1dcab3ac&v=v30

but vite-plugin-webfont-dl gives this error

[webfont-dl] https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4H57QnV
 ERROR  [vite-plugin-webfont-dl] Request failed with status code 400

feat-agency / vite-plugin-webfont-dl Goto Github PK

vite-plugin-webfont-dl's People

Contributors

Stargazers

Watchers

Forkers

vite-plugin-webfont-dl's Issues

Error:

vite.config.ts

Recommend Projects

Recommend Topics

Recommend Org

Jobs

`vite.config.ts`