preload fonts in start

how to preload fonts like sveltekit?
import type { Handle } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {
const response = await resolve(event, {
preload: () => true,
});

return response;
};
import type { Handle } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {
const response = await resolve(event, {
preload: () => true,
});

return response;
};
28 Replies
Brendonovich
Brendonovich4w ago
add <link rel="preload"> elements to entry-server
Hussein
HusseinOP4w ago
but i use @fontsource i won't know what the vite-hashed file name of the font...
Brendonovich
Brendonovich4w ago
you can get the url of the specific fonts you want to preload with ?url imports, it's what we do in solidbase we import the fontsource css normally but only preload specific font files
Hussein
HusseinOP4w ago
is one tag all i need for each font? no need for anything other than <link rel="preload">?
Brendonovich
Brendonovich4w ago
one tag per font file, there's a few attributes u need for each link. i can't remember them
Hussein
HusseinOP4w ago
as="font"
Brendonovich
Brendonovich4w ago
each fontsource css file contains like 5 font files, u probs don't need all of them preloaded tho
Hussein
HusseinOP4w ago
its a little complex, i need to know which ones are being used
Brendonovich
Brendonovich4w ago
ehh we just default to the latin standard/normal-wght ones
Hussein
HusseinOP4w ago
No description
Hussein
HusseinOP4w ago
there's at least 10 in the css 😐 which do i specify?
Brendonovich
Brendonovich4w ago
we just preload these ones the others are for more exotic character afaict
Hussein
HusseinOP4w ago
console.log(
await Promise.all(
Object.values(
import.meta.glob<boolean, string, { default: string }>(
"/node_modules/@fontsource/oswald/files/**/*",
{
query: "?url",
}
)
).map(async (fun) => (await fun()).default)
)
);
console.log(
await Promise.all(
Object.values(
import.meta.glob<boolean, string, { default: string }>(
"/node_modules/@fontsource/oswald/files/**/*",
{
query: "?url",
}
)
).map(async (fun) => (await fun()).default)
)
);
or i can preload them all 😐
Brendonovich
Brendonovich4w ago
definitely wouldn't recomend that
Hussein
HusseinOP4w ago
i was tryna use it for fout but it didn't fix it, any ideas for fout?
Brendonovich
Brendonovich4w ago
preload links, see https://solidbase.dev/
SolidBase
SolidBase
Fully featured, fully customisable static site generation for SolidStart
Hussein
HusseinOP4w ago
yeah that's what i did, it didn't work or maybe i did it wrong should i add it before {assets} or after?
Brendonovich
Brendonovich4w ago
i put it right below viewport
No description
Hussein
HusseinOP4w ago
No description
Hussein
HusseinOP4w ago
._. i'm doing this and it still flashes should i not include .woff, only include .woff2?
Brendonovich
Brendonovich4w ago
is that dev or prod?
Hussein
HusseinOP4w ago
dev
Brendonovich
Brendonovich4w ago
i don't think u can avoid fout in dev vinxi thing or something
Hussein
HusseinOP4w ago
is it ok i have chrome devtools cache disabled to test?
Brendonovich
Brendonovich4w ago
do a prod build to find out if it actually works
Hussein
HusseinOP4w ago
ok i think it works i'm not seeing any flash, with "cache" disabled in network tab good
Brendonovich
Brendonovich4w ago
preloading that many fonts at once will probably affect your load times
Hussein
HusseinOP4w ago
i will take care of that, just wanted to make sure it works at all, thanks!

Did you find this page helpful?