Skip to content

Conversation

@Mef45
Copy link
Contributor

@Mef45 Mef45 commented Apr 9, 2024

When trying to implement unplugin-fonts into my SvelteKit project today, I followed the provided instructions but continually experienced issues with my fonts not displaying.

After some troubleshooting, I discovered that due to SvelteKit not using transformIndexHtml vite process, the automatic addition of font links from vite.config.js(ts) based on the injectTo parameter isn't possible.

The workaround solution for this is to add the following code into +layout.svelte (or another preferred location):

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

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

This snippet is currently utilized in an existing SvelteKit example, however, it's not explicitly mentioned in the instructions that this is a necessary step.

In this PR, I have included mention of this code snippet in the instructions for adding the plugin to a SvelteKit project. I believe that this will prevent similar issues from occurring amongst other users.

@stafyniaksacha stafyniaksacha merged commit a7e66d5 into cssninjaStudio:main Apr 9, 2024
@stafyniaksacha
Copy link
Member

Thanks for your contribution @Mef45 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants