Sveltekit component library self hosting fonts issue

[vasilppetrov]

Describe the bug

I'm trying to build svelte components lib with Svelte kit. I want to self host my fonts, so I have added them in my custom component "Theme" which exports my global styles and fonts.

Folder structure is:

Theme/
Theme.svelte
fonts/webfonts/custom_font.woff2
fonts/webfonts/custom_font.ttf
css/ fonts.css

1. When I run the project with "npm run dev" , it is working in my demo page in routes/ index.svelte.
2. When I run "npm run package", svelte generates folder "package" and there is my component and the fonts folder with its content, but the .woff2 file and .ttf are broken. When I create a new project and add the package to it, there is an error in the browser "Failed to decode downloaded font:". After I've replaced the generated .woff2 and .ttf files after "npm run package" with those that are in my lib folder, it works as expected.

Is there a way to tell Svelte kit to not processing or modifying the files in folder or in general to skip file types in project but add them to package after run the command.
I'm sure that there is way to achieve this and I'll be very thankful If someone helps me

Reproduction

<script>
	console.log('Theme initialized');
</script>

<div class="theme">
	<slot />
</div>

<style global lang="scss">
	// Adding global styles
	@import '../../styles/root';
	@import '../../styles/utilities';
	@import '../../styles/base';
	@import './fonts/css/fonts.css';
</style>

Logs

No response

System Info

System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 2.55 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm

Severity

annoyance

Additional Information

No response

[ignatiusmb]

At first glance, I think you've stumbled upon #3109, please see the answer there if that's the case.

But, I think you're misunderstanding what package command is, I'm not sure what you meant by "skip file types but add them to package after", you need to put everything that you want packaged inside src/lib, that means putting the fonts inside lib folder.

[vasilppetrov]

Hello, I've put the fonts in lib folder
Here are folder structure in lib:

Here is folder structure after package:

When I copy the package folder and paste it in node_modules in new project:

In the new project where I use created package the files are there but woff2 and ttf files doesn't work when I try to use the component:

The styles are there:

Can you tell me why .woff and .ttf files are corrupted after 'npm run package' ?

[ignatiusmb]

Because you're also referring node_modules when importing your package, remove it and try again. If that still doesn't work, please make a minimal reproducible example rather than screenshots of code snippets and results.

[vasilppetrov]

The problem still exists.
Can i Ask you more general question? Is it possible to self host fonts and what is he best practice to do it? I want the fonts to be available in my components lib created with Svelt Kit.

[ignatiusmb]

For more general questions and real-time discussions, you might have more luck in the Discord chat room. But to answer your question, it is possible, if we're talking about self-hosting, then having a single .css that instantiates the fonts and have users import that file would probably be the way to go. As for now, let's get your initial problem sorted, so a cloneable repository would help in this case.

[mustofa-id]

I've faced same issue, the package command look like did something with font files, so Failed to decode warning make sense. I've tried to copy original fonts to package output directory and it's worked. Related issue #3507.

ps: update to add related issue

[ignatiusmb]

Turns out this is a bug indeed, #3507 shows that the image is corrupted, and it seems to be the case for font files (and other binaries) as well. It isn't clear at first glance for this particular case, so an example repository would be helpful next time.

[ignatiusmb]

Seems like @mustofa-id has already mentioned it as well in the other reply

[vasilppetrov]

I'm glad we got along :). I will try again after your fix is added. Тhanks for the help !!!