turbopack build does not correctly resolve fonts from next/fonts

[stefanprobst]

Link to the code that reproduces this issue

https://github.com/stefanprobst/issue-next-turbo-fonts

To Reproduce

1. clone repo, pnpm install
2. pnpm build (which runs next build --turbopack) and pnpm start (which runs next start --turbopack)
3. open http://localhost:3000 and inspect the <h1> which does not have "Geist" font family applied
4. for comparison, inspect the h1 after running either pnpm dev (which runs next dev --turbopack) or run pnpm build:webpack && pnpm start:webpack - in all these cases the h1 has the correct "Geist" font-family applied.
5. NOTE: when next/font is not imported in the not-found page here it does work correctly with turbopack build as well.

Current vs. Expected behavior

turbopack build should behave like webpack build/dev, and turbopack dev.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #202403151937 SMP PREEMPT_DYNAMIC Fri Mar 15 19:52:22 UTC 2024
  Available memory (MB): 31401
  Available CPU cores: 16
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: 10.6.2
Relevant Packages:
  next: 15.3.0-canary.38 // Latest available version is detected (15.3.0-canary.38).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack, Font (next/font)

Which stage(s) are affected? (Select all that apply)

next build (local)

[vidyesh95]

I am also getting error on windows 11 for next/font Turbopack

[godedshaw]

seeing this on 15.3 turbo builds also - not just next/font but any font even ones loaded through global.css imports. Major regression

[stahlmanDesign]

After updating to next 15.3.0 I'm seeing that locally imported fonts still work (I'm using Tailwind):

@layer base {
  @font-face {
    font-family: 'MT Baskerville ET W08 Italic';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src:
      local('MT Baskerville ET W08 Italic'),
      url('/fonts/MT Baskerville ET W08 Italic/MT Baskerville ET W08 Italic.ttf')
        format('truetype');
  }
...

but not Google fonts loaded from a remote url:

@import url('https://fonts.googleapis.com/css?family=Oswald:300,300i,700,800')

When I downloaded the Google font and imported it locally, everything is back to normal

[Arctomachine]

It happens because page tries to load fonts from /media/something.woff2
It is 404 unless your project handles nested catch all route to somehow serve this request

[icflorescu]

Just managed to replicate this and learned the hard way that I should have refrained from upgrading.
It's a purely turbopack-related regression in 15.3 and has nothing to do with tailwind or your environment.
I'm actually surprised so few people bumped into it so far.

[colexbruhn]

I'm also able to replicate this on 15.3.1 and the latest canary branch using Windows 11 + WSL2. Everything works well on 15.2.x with turbopack enabled, so it does look like a regression was introduced somewhere in the 15.3 patch.

For now, disabling turbopack works well enough for anyone needing to develop on the canary branch

[luchillo17]

I would gather the simplest fix is to install the font locally with (P)NPM and use it instead of next/font, though Idk if that opts me out of any optimization: https://www.npmjs.com/package/geist