`next/font` no longer works with "Inter" and "slnt" axes enabled

[stefanprobst]

Link to the code that reproduces this issue

https://github.com/stefanprobst/issue-next-fonts-inter-slnt

To Reproduce

clone repo, install deps, run pnpm run build.

see error message:

Failed to fetch `Inter` from Google Fonts.}
Failed to fetch font `Inter`.
URL: https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap

Please check if the network is available.

Retrying 1/3...
Failed to fetch font `Inter`.
URL: https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap

Please check if the network is available.

Retrying 2/3...
Failed to fetch font `Inter`.
URL: https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap

Please check if the network is available.

Retrying 3/3...
Error [NextFontError]: Failed to fetch font `Inter`.
URL: https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap

Please check if the network is available.

Current vs. Expected behavior

font download should work (as it did until recently)

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #45~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Jul 15 16:40:02 UTC 2
  Available memory (MB): 15893
  Available CPU cores: 4
Binaries:
  Node: 20.16.0
  npm: 10.8.1
  Yarn: N/A
  pnpm: 9.6.0
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

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

Font (next/font)

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

next build (local)

Additional context

see google/fonts#7985 for upstream changes

when downloading Inter directly from google, the embed link is:

https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap

while next/font tries the following url, which now fails:

https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap

[CypherpunkSamurai]

I'm having the same error on node 22 and node lts (20) versions. any workaround would be appreciated.

For the time being i'm downgrading.

[ljs19923]

Same error

[peguerosdc]

I am facing a similar error. Not sure if it's related, but it also started to happen unexpectedly:

Invalid response body while trying to fetch https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap: incorrect header check

Retrying 1/3...
Invalid response body while trying to fetch https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap: incorrect header check

Retrying 2/3...
Invalid response body while trying to fetch https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap: incorrect header check

Retrying 3/3...
FetchError: Invalid response body while trying to fetch https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap: incorrect header check
    at Gunzip.<anonymous> (/Users/user/dev/mindora/node_modules/next/dist/compiled/node-fetch/index.js:1:53082)
    at Gunzip.emit (node:events:532:35)
    at emitErrorNT (node:internal/streams/destroy:170:8)
    at emitErrorCloseNT (node:internal/streams/destroy:129:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'Z_DATA_ERROR',
  code: 'Z_DATA_ERROR'
}
 ⨯ Failed to download `Manrope` from Google Fonts. Using fallback font instead.

It happens with Manrope and Inter.

[CypherpunkSamurai]

The google font urls are broken. When requesting multiple font's it's giving timeout errors.

It is not a network issue as online IDEs also have this error.

[stefanprobst]

this seems to also make a next.js test fail, see #68475 (comment)

Snapshot name: `getFontAxes errors Invalid axes value 1`

- Snapshot  - 1
+ Received  + 1

  Invalid axes value for font `Inter`, expected an array of axes.
- Available axes: `slnt`
+ Available axes: `opsz`

[samcx]

@stefanprobst Taking a look at this! I think we just need to update our test so #68639 merges, which I believe would fix it so the correct embed URL is used.

I think the axes need to also have an ital, so I may trigger another Update font data after this one.

[samcx]

Interesting, the Google font data still doesn't include ital, but it didn't include opsz → https://github.com/vercel/next.js/pull/68639/files. I'll keep this issue open until this changes!

In the meantime, a new canary release should come out very soon with the update.

[stefanprobst]

@samcx if i understand the upstream change correctly, there is no ital axis, but two separate files, one for font-style: normal and one for font-style: italic. see: google/fonts#2386 (comment)

[stefanprobst]

also, will the updated font data be backported to next.js 14.x?

[mlmetzner]

I am having similiar issues with Roboto.

[samcx]

@mlmetzner Try v15.0.0-canary.110!

@stefanprobst Yes, I added to the queue for 14.2.6. No exact date for when that's released, but hopefully you can start using the canary in the meantime!

I'll be closing this issue in the meantime. 🙇🏼

[ljs19923]

@samcx Im not sure to understand what's the current solution?

Thank you

I was using,

import { Inter } from "next/font/google
const inter = Inter({ subsets: ["latin"], axes: ["slnt"] });

<style jsx global>{` :root { --font-inter: ${inter.style.fontFamily}; } `}</style>