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•8mo ago

add <link rel="preload"> elements to entry-server

exerciseOP•8mo ago

but i use @fontsource i won't know what the vite-hashed file name of the font...

Brendonovich•8mo 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

exerciseOP•8mo ago

is one tag all i need for each font? no need for anything other than <link rel="preload">?

Brendonovich•8mo ago

one tag per font file, there's a few attributes u need for each link. i can't remember them

exerciseOP•8mo ago

as="font"

Brendonovich•8mo ago

each fontsource css file contains like 5 font files, u probs don't need all of them preloaded tho

exerciseOP•8mo ago

its a little complex, i need to know which ones are being used

Brendonovich•8mo ago

ehh we just default to the latin standard/normal-wght ones

exerciseOP•8mo ago

exerciseOP•8mo ago

there's at least 10 in the css 😐 which do i specify?

Brendonovich•8mo ago

we just preload these ones the others are for more exotic character afaict

exerciseOP•8mo 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)
  )
);