[Bug]: Font not loading in Sveltekit

[maxdewald]

Demo URL

https://stackblitz.com/edit/sveltejs-kit-template-default-yh1zpq?file=jsconfig.json

What happened?

Thank you for this cool lib :)

I couldn't get it to work on sveltekit. I think configured everything correctly, but the font still won't load.

Reproduction steps

1. Open Stackblitz
2. npm run dev
3. font isn't loaded/applied

Relevant log output

No response

What browsers are you seeing the problem on?

No response

What is your operating system?

No response

[cssninjastudio[bot]]

Hello @Maggi64! Thanks for opening this issue, we will get back to you soon! Until then, feel free to join us on discord

If you love our work, please consider sponsoring us

[stafyniaksacha]

Hello @Maggi64!

I've found that I can not inject head tags via the vite plugin (this is related to sveltekit not using transformIndexHtml vite process)

So, similarly to astro, we have to manually inject links to the template:

<script>
  import { links } from 'unplugin-fonts/head'
</script>

<svelte:head>
  {#each links as link}
    <link {...link?.attrs || {}} />
  {/each}
</svelte:head>

I can export a simple component like I did for astro here: https://github.com/cssninjaStudio/unplugin-fonts/blob/main/src/astro/component.astro

What do you think?

[maxdewald]

@stafyniaksacha sounds good!