Docs around loading fonts and global CSS imports

[mvolfik]

I just went through a quite painful setup of fonts for my project - first I was trying to include font files manually from google webfonts helper. But the @font-face definitions were being removed somewhere during css optimization in build. I ended up looking into the example project, where I discovered that fontsource exists, and that fonts are loaded with import "../app.css", which I didn't find documented anywhere. Also I faced another issue with using fontsource customizable sass mixins, as the referenced files weren't being loaded from the tilde path so I had to override $fontDir: "@fontsource/#{Roboto.$fontId}/files"

I'll be very happy to contribute docs for all of this to avoid this pain for others in the future, but first I'd like to check if there's a best practice established, get some info about importing css files in js, and where actually to put this so the docs page doesn't grow infinitely with various best-practices and tips

[ayuhito]

If this does go through and is approved, please do tag me in the PR. I'll happily review the content and link the final page in the Guides section of the Fontsource docs since I've never personally worked with Svelte but still wish to support the community.

[danielrob]

@mvolfik thanks, this got me unstuck.

Although @fontsource is a nice and tidy approach I was previously using https://google-webfonts-helper.herokuapp.com/fonts to self-host the fonts.

When doing so in my case SvelteKit was preserving the @font-face definitions, but the actual font assets referenced in the url() call in the @font-face rule weren't being carried across from the static folder during the build (adaptor-static). The dev build was fine.

Should I report this separately as a bug do you think, or am I doing something wrong?

[mvolfik]

If you had the font files in the project/static folder (implying your package.json is located in project/package.json) and you didn't change the config value kit.files.assets, then yes, it sounds like a separate issue. But I'm not sure I understood you correctly - could you point me to the repo where the issue happens or setup a minimal example where someone can look at the issue?

[ayuhito]

@mvolfik, while we wait for the maintainers to take a look at this issue, do you think it'll be alright to just post a dedicated guide directly in the Fontsource docs itself?

It would then be pretty easy to copy and paste or link it in the Svelte docs in the future.

[billpliske]

This might be in line with the initial comment, but here's my situation.

In my main index.svelte file, I'm pulling in a Google font via @import inside a <svelte:head>.
I've also done it via the <link> method.
In both cases, the font DOES show up in ALL routes located within the root of the routes folder.

However, I also have some routes located inside some route subfolders.
So routes/arizona/index.svelte, for example.

The bad font appears in all pages (or components) that get opened from a subfolder route.
They each default back to sans-serif.

Hopefully there something useful in this for all of you.
But seriously loving Sveltekit!

[owtotwo]

@danielrob

When doing so in my case SvelteKit was preserving the @font-face definitions, but the actual font assets referenced in the url() call in the @font-face rule weren't being carried across from the static folder during the build (adaptor-static). The dev build was fine.

I encountered the same problem. svelte-kit dev is fine, but svelte-kit build will not put the assets(image and font files) referenced in my style by url(...) into the /_app/assets/pages/... folder.

The browser reported an error as GET http://localhost:3000/_app/assets/pages/img/background.png 404 (Not Found).

The reason for my error is that I set the url(img/background.png) in <style> tag as a RELATIVE path instead of an ABSOLUTE path. @font-face is the same situation in my project.

After I changed the relative path to the absolute path, that is, url(img/background.png) => url(/img/background.png), the problem seemed to be solved. (url(...) in @font-face is the same)

Maybe you are not encountering this problem, but I still hope that other new users of sveltekit who encounter similar situations can receive a little help.

[ayuhito]

Just dropping a request that since even now there isn't much concrete documentation on importing Fontsource into Svelte (first Google search leads to this issue), I'd love it if someone could assist in writing up some documentation for it in fontsource/fontsource#443! I don't really know much about Svelte to actually work on it myself, unfortunately. 😓

[lucavenir]

This thread helped me a lot to set-up Fontface w/ Material Icons: thanks! The first google search lead, indeed, is this page.

[ebeloded]

Please see two issues regarding loading global CSS files #1948 and #3127 - would love some feedback from maintainers