search

feat-agency / vite-plugin-webfont-dl

⚡ Webfont Download Vite Plugin - Make your Vite site load faster
MIT License
302 stars 11 forks source link

SvelteKit support? #33

Closed thonkinator closed 1 year ago

thonkinator commented 1 year ago

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.

0xb4lint commented 1 year ago

Hi @thonkinator!

I've tried to test what's happening on your side, here what I did:

  1. Created a new StackBlitz fork using: https://vite.new/svelte-ts
  2. Ran npm i vite-plugin-webfont-dl -D
  3. Restarted vite dev server
  4. Added import webfontDownload from 'vite-plugin-webfont-dl' and webfontDownload() to plugins array (in vite.config.ts)
  5. Added some Google Fonts snippet to 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=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap" rel="stylesheet">
  6. Replaced font-family to Roboto in src/app.css

In this way the web server is working as expected, there's a virtual route (/@webfonts/webfonts.css), containing virtual font definitions, which are downloaded JIT as requested.

Link to my fork: https://stackblitz.com/edit/vitejs-vite-zsqx2t?file=package.json,vite.config.ts,index.html,src%2Fapp.css&terminal=dev

Could you please send link to your project or a sample which showing it's not working?

thonkinator commented 1 year ago

@0xb4lint I was using the feature where you could add the webfont URLs to vite.config.ts, but I'll try adding the actual <link> elements when I get home. Thanks!

0xb4lint commented 1 year ago

I've made another fork using the configuration option instead of <link>s: https://stackblitz.com/edit/vitejs-vite-bzfrca?file=package.json,vite.config.ts,src%2Fapp.css&terminal=dev

It works with dev server and build as well.

phiberber commented 1 year ago

Wasn't he talking about SvelteKit? Your forks do not use SvelteKit, only Svelte and Vite.

0xb4lint commented 11 months ago

Wasn't he talking about SvelteKit? Your forks do not use SvelteKit, only Svelte and Vite.

You are right @phiberber!

I've just checked with a new SvelteKit project, unfortunately neither the transformIndexHtml hook nor the transform hook was called with any html input. That means the plugin cannot read or inject to the app.html file. 😞