preload fonts by default

[benmccann]

Describe the problem

According to #4963, @Rich-Harris said we don't preload fonts by default because they may be imported but not used on a page. Though I'm not sure that's a great reason for us to not do it by default as that seems like the user has coded things incorrectly in that case

Describe the proposed solution

Maybe Vite could issue a warning for fonts that are imported, but never used if we really care about detecting that

Alternatives considered

No response

Importance

nice to have

Additional Information

Font preloading sometimes doesn't work before Vite 5. Fixed in vitejs/vite#14297

[dummdidumm]

We removed loading fonts by default in #7704 because there were too many false positives. Fonts in general can be very dynamic (fallback fonts, load a different font based on a unicode range) and as such just loading them upfront when detected anywhere on the page was turning out to be the wrong default. I'm against switching this, unless we can somehow find out which fonts are definitely loaded.

[benmccann]

Hmm. I'd be curious if we can get some data around this. I'll close this for now I guess

[dummdidumm]

Reopening so we can continue at some point to look into this, but taking this off the 2.0 milestone

[Rich-Harris]

A case study: the (unreleased) new site, which inherited the following code from the site in this repo...

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
  return await resolve(event, {
    preload: ({ type }) => type === 'js' || type === 'css' || type === 'font'
  });
}

...got a terrible Lighthouse score because LCP was delayed while the browser preloaded every single variant of every font referenced by CSS. When you use something like @fontsource, that means you're downloading .woff (not just .woff2) files for every alphabet, even if you never use cyrillic or whatever.

That's why this is a terrible default. In an ideal world we would have some way to automate the process of preloading only the font files that are needed for content above the fold on a given page, but that's a ways off.