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•3d ago

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

HusseinOP•3d ago

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

Brendonovich•3d 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

HusseinOP•3d ago

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

Brendonovich•3d ago

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

HusseinOP•3d ago

as="font"

Brendonovich•3d ago

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

HusseinOP•3d ago

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

Brendonovich•3d ago

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

HusseinOP•3d ago

HusseinOP•3d ago

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

Brendonovich•3d ago

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

HusseinOP•3d 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)
  )
);