Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add step for adding font links in svelte:head to sveltekit installation guide #67

Merged
merged 2 commits into from
Apr 9, 2024

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