Failed to fetch Fonts from Google

[ezeamin]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 19.2.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13
      eslint-config-next: 13.4.13
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Actually, I'm on Windows 11 and using pnpm v.8.6.10

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

No response

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

This cannot be reproduced in a CodeSandbox example, because it's a NETWORK PROBLEM

To Reproduce

Usage with App Router and next/font.

Run pnpm run dev or pnpm run build. Compiling the page fails fetching the fonts (it doesn't matter which ones) from Google.

Describe the Bug

I manage a project both in my house and in my office. At my house, nothing weird happens, but at the office, fetching the fonts fails with the following error:

request to https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400&display=swap failed, reason: getaddrinfo ENOTFOUND 8080

I'm able to access that link without any problems via Chrome, but not via cmd.

This cannot be reproduced in a CodeSandbox example, because it's a network problem. Several more had happened like this in the past, e.g. with Github Copilot or Prisma, but opening a ticket got this resolved.

I'm not behind any configuration that could affect this behavior, other than the routing my infra team does with our requests.

Expected Behavior

Error not showing and fonts being fetched.

Which browser are you using? (if relevant)

Chrome 115.0.5790.171

How are you deploying your application? (if relevant)

No response

[kylemcd]

This sounds like a networking issue at your office rather than a problem with next/font. It could be possible that an AdBlocker on your computer or filtering at the network level could be blocking the connection to Google Fonts.

[ezeamin]

Hello. After some research, I found out that the problem is with webpack, because when I initiate the project using --turbo, the problem is solved.

[markedwards]

Also seeing this issue but with an empty reason:

request to https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap failed, reason:

Its intermittent, it happen maybe 5-10% of the time after next dev or next build.

[arnotixe]

I haven't seen this issue on my Vercel builds, but the Heroku builds fail like 30% of the time due to timeout (next/font/google). If there was a retry/way around maybe we don't need to hire a person to sit and click Deploy until it succeds :+1:

[ALFAMAS]

same issue any fix ??

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[cristiangon10]

I was just getting the same error, in my case it turned out that it was indeed a network problem, and its failure was due to having the Windows Firewall disabled. Thanks for this thread guys, thanks @kylemcd 🚀