next/font/google failed to download `Overpass` #53279

jscastanos · 2023-07-28T01:31:47Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1635-Microsoft Fri Jan 01 08:00:00 PST 2016
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 3.2.4
      pnpm: N/A
    Relevant packages:
      next: 13.3.4
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Font optimization (next/font)

Link to the code that reproduces this issue or a replay of the bug

N/A

To Reproduce

Load a font

const overpass = Overpass({
  subsets: ['latin'],
  variable: '--font-overpass',
  display: 'swap',
});

Apply style to the body

  useEffect(() => {
    // We're doing it this way to include the floating-ui stuff
    document.body.classList.add(overpass.className);
  }, []);

Describe the Bug

The font style is not the same in the local server compared to our deployed version

Text in Local Server

Text in Deployed Version

to describe the difference the font should be smaller and sharp compared to what I got when locally which is not the correct thing .

When inspecting further I found 2 things:

the loaded css in local dev doesnt have a source (which is weird)
I'm getting an error when downloading the font

So far what I tried is adding a preload: false or adjustFontFallback: false on font load but it failed.

Not sure if this is relevant, but I'm using a satellite internet 🚀

Expected Behavior

The appearance of font should be the same both local and the deployed version.

Which browser are you using? (if relevant)

Brave 1.56.14

How are you deploying your application? (if relevant)

N/A

The text was updated successfully, but these errors were encountered:

### What? Exposing the original error message. ### Why? While looking at #53279, I noticed that we don't show the original error message, which makes it hard to guess why the error was thrown in the first place. ### How? Related #53279

balazsorban44 · 2023-07-28T13:32:33Z

Hi @jscastanos we just released a new next@canary that should add a bit more info on why the download failed. Can you upgrade and let me know what you see? 🙏

vionofrio · 2023-07-30T18:01:13Z

Hi @jscastanos we just released a new next@canary that should add a bit more info on why the download failed. Can you upgrade and let me know what you see? 🙏

Same issue here, happens with any font.

AbortError: The user aborted a request.
    at abort (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65190)
    at EventTarget.abortAndFinalize (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:762:20)
    at EventTarget.dispatchEvent (node:internal/event_target:704:26)
    at abortSignal (node:internal/abort_controller:314:10)
    at AbortController.abort (node:internal/abort_controller:332:5)
    at Timeout.<anonymous> (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\@next\font\dist\google\fetch-font-file.js:24:51)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  type: 'aborted'
}
- error Failed to download `Roboto` from Google Fonts. Using fallback font instead.

Failed to fetch `Roboto` from Google Fonts.}
AbortError: The user aborted a request.
    at abort (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65190)
    at EventTarget.abortAndFinalize (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:762:20)
    at EventTarget.dispatchEvent (node:internal/event_target:704:26)
    at abortSignal (node:internal/abort_controller:314:10)
    at AbortController.abort (node:internal/abort_controller:332:5)
    at Timeout.<anonymous> (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\@next\font\dist\google\fetch-font-file.js:24:51)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  type: 'aborted'
}
AbortError: The user aborted a request.
    at abort (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65190)
    at EventTarget.abortAndFinalize (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:762:20)
    at EventTarget.dispatchEvent (node:internal/event_target:704:26)
    at abortSignal (node:internal/abort_controller:314:10)
    at AbortController.abort (node:internal/abort_controller:332:5)
    at Timeout.<anonymous> (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\@next\font\dist\google\fetch-font-file.js:24:51)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  type: 'aborted'
}
AbortError: The user aborted a request.
    at abort (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65190)
    at EventTarget.abortAndFinalize (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:762:20)
    at EventTarget.dispatchEvent (node:internal/event_target:704:26)
    at abortSignal (node:internal/abort_controller:314:10)
    at AbortController.abort (node:internal/abort_controller:332:5)
    at Timeout.<anonymous> (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\@next\font\dist\google\fetch-font-file.js:24:51)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  type: 'aborted'
}
AbortError: The user aborted a request.
    at abort (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65190)
    at EventTarget.abortAndFinalize (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:762:20)
    at EventTarget.dispatchEvent (node:internal/event_target:704:26)
    at abortSignal (node:internal/abort_controller:314:10)
    at AbortController.abort (node:internal/abort_controller:332:5)
    at Timeout.<anonymous> (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\@next\font\dist\google\fetch-font-file.js:24:51)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  type: 'aborted'
}
AbortError: The user aborted a request.
    at abort (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65190)
    at EventTarget.abortAndFinalize (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\node-fetch\index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:762:20)
    at EventTarget.dispatchEvent (node:internal/event_target:704:26)
    at abortSignal (node:internal/abort_controller:314:10)
    at AbortController.abort (node:internal/abort_controller:332:5)
    at Timeout.<anonymous> (\node_modules\.pnpm\next@13.4.13-canary.6_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\@next\font\dist\google\fetch-font-file.js:24:51)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  type: 'aborted'
}

jscastanos · 2023-07-31T01:45:03Z

thanks @balazsorban44 will try it and get back to you.

jscastanos · 2023-07-31T02:57:29Z

@balazsorban44 I can't verify it right now as I'm getting a different error. Might be related to this #46374

Module parse failed: The keyword 'interface' is reserved (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Seems like the next@canary is not working with "nx": "16.5.5",

balazsorban44 · 2023-07-31T08:53:53Z

That should be reported at nx, I believe. It looks like some TS files are loaded as JS for some reason, without compiling them. 🤔

erich2s · 2023-08-04T15:13:28Z

same here🥲

javierdev0 · 2023-08-16T14:00:29Z

This work for me #45080 (comment)

ricardo-fnd · 2023-08-23T14:18:18Z

Be sure you are using node version 18+. I was using 16 and I was getting all this errors with fonts download and sockets hang up...
I'm currently using 18.15.0 and all errors on the server disappeared

jscastanos · 2023-08-24T06:22:20Z

Be sure you are using node version 18+. I was using 16 and I was getting all this errors with fonts download and sockets hang up... I'm currently using 18.15.0 and all errors on the server disappeared

I'm using node 18.12.1

jscastanos · 2023-09-05T05:22:31Z

Closing this ticket:

I solved this issue by updating my WSL 2 and used Ubuntu 22.04 instead of Ubuntu 20.04

github-actions · 2023-09-19T12:01:39Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

jscastanos added the bug Issue was opened via the bug report template. label Jul 28, 2023

github-actions bot added the Font (next/font) Related to Next.js Font Optimization. label Jul 28, 2023

balazsorban44 added the Developer Experience Issues related to Next.js logs, Error overlay, etc. label Jul 28, 2023

balazsorban44 mentioned this issue Jul 28, 2023

fix(font): expose loading error for debugging #53284

Merged

jscastanos closed this as completed Sep 5, 2023

github-actions bot added the locked label Sep 19, 2023

github-actions bot locked as resolved and limited conversation to collaborators Sep 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

next/font/google failed to download `Overpass` #53279

next/font/google failed to download `Overpass` #53279

jscastanos commented Jul 28, 2023

balazsorban44 commented Jul 28, 2023

vionofrio commented Jul 30, 2023

jscastanos commented Jul 31, 2023

jscastanos commented Jul 31, 2023

balazsorban44 commented Jul 31, 2023

erich2s commented Aug 4, 2023

javierdev0 commented Aug 16, 2023

ricardo-fnd commented Aug 23, 2023 •

edited

jscastanos commented Aug 24, 2023

jscastanos commented Sep 5, 2023

github-actions bot commented Sep 19, 2023

next/font/google failed to download Overpass #53279

next/font/google failed to download Overpass #53279

Comments

jscastanos commented Jul 28, 2023

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue or a replay of the bug

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

balazsorban44 commented Jul 28, 2023

vionofrio commented Jul 30, 2023

jscastanos commented Jul 31, 2023

jscastanos commented Jul 31, 2023

balazsorban44 commented Jul 31, 2023

erich2s commented Aug 4, 2023

javierdev0 commented Aug 16, 2023

ricardo-fnd commented Aug 23, 2023 • edited

jscastanos commented Aug 24, 2023

jscastanos commented Sep 5, 2023

github-actions bot commented Sep 19, 2023

next/font/google failed to download `Overpass` #53279

next/font/google failed to download `Overpass` #53279

ricardo-fnd commented Aug 23, 2023 •

edited