Error 'Failed to fetch `Noto Sans JP` from Google Fonts.'

[max-ch9i]

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: Ubuntu 20.04.0 LTS Fri Jan 20 2023 09:56:57 GMT+0000 (Greenwich Mean Time)
Binaries:
  Node: 16.14.2
  npm: 7.17.0
  Yarn: 1.22.19
  pnpm: 7.13.6
Relevant packages:
  next: 13.1.3
  eslint-config-next: N/A
  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

https://stackblitz.com/edit/nextjs-qcjltu?file=app%2Fpage.js,package.json

To Reproduce

To reproduce, run npm run build.

Describe the Bug

Font input is

import { Noto_Sans_JP } from '@next/font/google';

const notoSansJapanese = Noto_Sans_JP({
  weight: '400',
  preload: false,
});

results in

Failed to compile.

app/page.js
`@next/font` error:
Failed to fetch `Noto Sans JP` from Google Fonts.

Possibly related to #44594
and 5f2c9d0

Expected Behavior

Compiles successfully.

[pandaman64]

The error happens with other fonts such as Roboto:
https://stackblitz.com/edit/nextjs-xxuvuq?file=app/page.js

[pandaman64]

It looks like fetchFontFile function is failing with an error:

next.js/packages/font/src/google/utils.ts

Line 258 in ac0b6d2

const arrayBuffer = await fetch(url).then((r: any) => r.arrayBuffer())

FetchError: request to https://fonts.gstatic.com/s/notosansjp/v42/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.5.woff2 failed, reason: read ECONNRESET
    at ClientRequest.<anonymous> (/path/to/node_modules/next/dist/compiled/node-fetch/index.js:1:65756)
    at ClientRequest.emit (node:events:513:28)
    at ClientRequest.emit (node:domain:489:12)
    at TLSSocket.socketErrorListener (node:_http_client:494:9)
    at TLSSocket.emit (node:events:513:28)
    at TLSSocket.emit (node:domain:489:12)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'ECONNRESET',
  code: 'ECONNRESET'
}

I can access the URL via the browser/curl, so I think it's not the internet connection issue.

[bazhenov]

Have the same issue with default create-next-app skeleton.

event - compiled client and server successfully in 745 ms (195 modules)
Error [NextFontError]: Failed to fetch `Inter` from Google Fonts.
    at nextFontError (/Users/bazhenov/Developer/foo/my-app/node_modules/@next/font/dist/utils.js:55:17)
    at downloadGoogleFonts (/Users/bazhenov/Developer/foo/my-app/node_modules/@next/font/dist/google/loader.js:87:39)
    at /Users/bazhenov/Developer/foo/my-app/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:52:99
    at async Span.traceAsyncFn (/Users/bazhenov/Developer/foo/my-app/node_modules/next/dist/trace/trace.js:79:20)
error - Failed to download `Inter` from Google Fonts. Using fallback font instead.

Seems like a SSL related error. Running npx next dev/npx next build with NODE_TLS_REJECT_UNAUTHORIZED=0, but you should use it at your own risk. It's effectively disable SSL certificate validation ⚠️.

[Shahzad6077]

Hey @max-ch9i, did you get any workaround I'm also facing the same error.

[max-ch9i]

@Shahzad6077 I just added font <link/>s into <head/> as instructed by Google Fonts.

[pandaman64]

Another workaround is downloading the fonts manually and using @next/font/local.

[Shahzad6077]

Yes I have downloaded the fonts locally and use @next/font/local but the font files are approx 27mb 😂

[max-ch9i]

CSS files provided by Google Fonts (https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap) have woff2 files split by unicode ranges. Downloading otf files and using @next/font/local is not an option for CJK.

[cannorin]

Removing the .next directory fixed the problem for me.

[pandaman64]

Hmm. The problem still occurs for me after removing .next.

[Dannymx]

Removing .next directory didn't fix it for me. Fails with 13.2.2-canary.1 and the new built-in font package.

[cannorin]

I've stumbled on this issue again after updating next to 13.2.3, and removing .next did fix the problem.

Here is my code, which, I suspect, should not be too different from anyone still having the problem:

import { Noto_Sans_JP } from "next/font/google";

const noto = Noto_Sans_JP({
  weight: ["400", "700"],
  preload: false, // https://github.com/vercel/next.js/pull/44594
});

So the other files than _app.tsx might be affecting I guess?

[Dannymx]

Strange, just a few days after I got the error, I didn't change anything (perhaps removed the .next folder again) but now the error is gone.

Nvm: error is back.