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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions