Docs around loading fonts and global CSS imports

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

[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]

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.