Skip to content

Font preloading does not work #16139

Description

@hyunbinseo

Describe the bug

@import '@sun-typeface/suit/fonts/variable/woff2/SUIT-Variable.css';

@import 'tailwindcss';
@plugin '@tailwindcss/forms';

@theme {
  --font-sans: 'SUIT Variable';
}

determines what files should be added to the <head> tag to preload it - source

export const handle = async ({ event, resolve }) => {
  return await resolve(event, {
    preload: ({ type }) => type === 'js' || type === 'css' || type === 'font'
  });
};

Above configuration does not generate an HTML tag like this:

<link rel="preload" as="font" type="font/woff2" crossorigin="" href="" />

Aren't .woff2 files referenced in Tailwind CSS files be preloaded?

while the browser preloaded every single variant of every font referenced by CSS. - source

This is the generated CSS file:

/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@font-face{font-family:SUIT Variable;font-weight:100 900;src:url(./SUIT-Variable.gqD86R3M.woff2)format("woff2-variations")}

Both static and variable WOFF2 files are affected. Checked SUIT static as well.

Reproduction

System Info

System:
  OS: Windows 11 10.0.26200
  CPU: (8) x64 Intel(R) Core(TM) Ultra 7 258V
  Memory: 4.89 GB / 31.48 GB
Binaries:
  Node: 24.17.0 - C:\Users\hyunb\AppData\Local\fnm_multishells\10684_1782206153995\node.EXE
  npm: 11.13.0 - C:\Users\hyunb\AppData\Local\fnm_multishells\10684_1782206153995\npm.CMD
  pnpm: 11.5.1 - C:\Users\hyunb\AppData\Local\fnm_multishells\10684_1782206153995\pnpm.CMD
  Deno: 2.4.0 - C:\Users\hyunb\.deno\bin\deno.EXE
Browsers:
  Chrome: 149.0.7827.156
  Edge: Chromium (149.0.4022.80)
  Firefox: 152.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
npmPackages:
  @sveltejs/adapter-auto: ^7.0.1 => 7.0.1
  @sveltejs/kit: ^2.66.0 => 2.66.0
  @sveltejs/vite-plugin-svelte: ^7.1.2 => 7.1.2
  svelte: ^5.56.3 => 5.56.3
  vite: ^8.0.16 => 8.0.16

Severity

annoyance

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions