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

Start with the example project's src/routes/__layout.svelte import of ../app.css and compare it with the linked fontsource SCSS mixins.scss reference. Check the existing SvelteKit documentation structure and determine where guidance on global CSS imports, font loading, and the $fontDir workaround belongs. Done means the relevant setup and best-practice guidance is documented without expanding unrelated pages.