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

Removing the .next directory fixed the problem for me.

This issue will be fixed #51890. We now have retry logic when this fails, CLI errors that tell you about unstable network, and it’s no longer depending on AbortController.

Let us know if you have other suggestions!

Upgrading Node version 14.x to 18.x inside the Vercel’s Settings > Node.js Version fixed this for me.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 3000);
const arrayBuffer = await (0, node_fetch_1.default)(url, {
        agent: (0, get_proxy_agent_1.getProxyAgent)(),
        // Add a timeout in dev
        signal: isDev ? controller.signal : undefined,
    })

there is abortController in fetch-font-file. in dev mode it use timeout 3000. consider more timeout or none?

https://github.com/vercel/next.js/issues/45080#issuecomment-1485398172 Looks like this is the cause🤔

After I directly modified the timeout from original 3000 to sufficient 30000 in the file noted in the error stack, it could fetch from Google Fonts successfully. However of course, this is only a temporal solution since you need to edit a file inside node_modules directly.

IMHO, the original timeout setting (3000) is too short for especially CJK fonts, which have relatively larger file sizes. Any improvement towards this would be so appriciated🥺

P.S. Please upvote this idea🙏 https://github.com/vercel/next.js/discussions/47009

Possible Temporal Fix

AbortError: The user aborted a request.
    at abort (/Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/node-fetch/index.js:1:65190)
    at EventTarget.abortAndFinalize (/Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/node-fetch/index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:735:20)
    at EventTarget.dispatchEvent (node:internal/event_target:677:26)
    at abortSignal (node:internal/abort_controller:308:10)
    at AbortController.abort (node:internal/abort_controller:338:5)
    at Timeout.<anonymous> (/Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js:24:51)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  type: 'aborted'
}
error - Failed to download `Noto Sans JP` from Google Fonts. Using fallback font instead.

In my case, I have editted /Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js as shown in the followind code:

    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 30000); // Originally 3000
    const arrayBuffer = await (0, node_fetch_1.default)(url, {
        agent: (0, get_proxy_agent_1.getProxyAgent)(),
        // Add a timeout in dev
        signal: isDev ? controller.signal : undefined,
    })

My environment

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
    Binaries:
      Node: 18.14.1
      npm: 9.3.1
      Yarn: 3.3.0
      pnpm: 7.29.3
    Relevant packages:
      next: 13.3.4
      eslint-config-next: 13.3.4
      react: 18.2.0
      react-dom: 18.2.0

Mmm… maybe it’s a issue with the node version? When running npm run dev after removing the .next folder, I get this error:

ReferenceError: AbortController is not defined

Looking for AbortController, I’ve found that node includes it since 15.0.0 and I’m using 14.21.1. Which version are you all using?

Im located in Russia and got this error. Fixed by using VPN.

As mentioned upgrading node version then removing .next folder. Fixed the issue for me.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 3000);
const arrayBuffer = await (0, node_fetch_1.default)(url, {
        agent: (0, get_proxy_agent_1.getProxyAgent)(),
        // Add a timeout in dev
        signal: isDev ? controller.signal : undefined,
    })

there is abortController in fetch-font-file. in dev mode it use timeout 3000. consider more timeout or none?

I was also struggling with this issue recently. In my case, the error was:

AbortError: The user aborted a request.
    at abort (/Users/martin/Local/.../node_modules/next/dist/compiled/node-fetch/index.js:1:65190)
    at EventTarget.abortAndFinalize (/Users/martin/Local/.../node_modules/next/dist/compiled/node-fetch/index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:737:20)
    at EventTarget.dispatchEvent (node:internal/event_target:679:26)
    at abortSignal (node:internal/abort_controller:314:10)
    at AbortController.abort (node:internal/abort_controller:344:5)
    at Timeout.<anonymous> (/Users/martin/Local/.../node_modules/next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js:35:55)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  type: 'aborted'
}
AbortError: The user aborted a request.
    at abort (/Users/martin/Local/.../node_modules/next/dist/compiled/node-fetch/index.js:1:65190)
    at EventTarget.abortAndFinalize (/Users/martin/Local/.../node_modules/next/dist/compiled/node-fetch/index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:737:20)
    at EventTarget.dispatchEvent (node:internal/event_target:679:26)
    at abortSignal (node:internal/abort_controller:314:10)
    at AbortController.abort (node:internal/abort_controller:344:5)
    at Timeout.<anonymous> (/Users/martin/Local/.../node_modules/next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js:35:55)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  type: 'aborted'
}
error - Failed to download `Raleway` from Google Fonts. Using fallback font instead.
error - Failed to download `Poppins` from Google Fonts. Using fallback font instead.

This started to occur on next version >= 13.2.4. In my case, downgrading to next 13.2.3 solved the issue. Removing .next folder or using different version of node did not help. Not sure what is the root cause of this, however hopefully it will be resolved in later versions of nextjs.

Can confirm. After updating from 13.2.3 to 13.2.4 the build breaks on vercel: Same error as in https://github.com/vercel/next.js/issues/45080#issuecomment-1467584677 The issue was fixed with updating from 14.x to 18.x (16.x also works) Here is my code:

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

const inter = Inter({
  display: "swap",
  subsets: ["latin"],
  variable: '--font-inter',
})

For anyone facing the issue on vercel make sure the Node Version is set to a newer version than 14.x (like 16.x and 18.x) in the project settings:

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.

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 ⚠️.

I am getting the Same Error on NodeJS v18.16.0 (LTS) with Next.js v13.3.1

@emmgfx are you using Node v14 by any chance? It was happening for us till yesterday. I tried with Node v16 and it worked like a charm!

Hello,

Any news on this? I still have this issue on next v13.4.4. I am on node v18.16.0 I have also deleted the .next folder. The error I get is:

AbortError: The user aborted a request.
    at abort (/home/user/code/projects/my-project.com/web/node_modules/next/dist/compiled/node-fetch/index.js:1:65190)
    at EventTarget.abortAndFinalize (/home/user/code/projects/my-project.com/web/node_modules/next/dist/compiled/node-fetch/index.js:1:65410)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:737:20)
    at EventTarget.dispatchEvent (node:internal/event_target:679:26)
    at abortSignal (node:internal/abort_controller:314:10)
    at AbortController.abort (node:internal/abort_controller:344:5)
    at Timeout.<anonymous> (/home/user/code/projects/my-project.com/web/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js:24:51)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  type: 'aborted'
}

The error looks intermittent so might not be permanently fixed for anyone. Could be some rate limiting or timeout.

I’ve upgraded Node to 18.x by Nvm, it worked.

Upgrading the node version higher than 14 solved my problem.

I was running v18 and this was happening as well, so I wouldn’t advise upgrading too far up until this is fixed. I’m now using v14 and the problem is gone.

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

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

const poppins = Poppins({
  weight: ["300", "400", "500", "600", "700"],
  subsets: ["latin"],
  preload: false,
  style: ["normal"],

  display: "swap",
});`  

### for me, this worked set preload:false

preload: false,

I just encounter the same issues with version 13.4.5 and I added this solution preload: false and it works fine for me. I’m using a Mac, Nodejs v16.15.1, Hope this helps anyone facing the same issues

It appears to me that it is caused by issue in node-fetch when there are a large amount of font files to fetch.

node-fetch/node-fetch#1735

I have a font config requiring me to download 404 font files which makes it impossible for me to build the project successfully. The error is gone when I reduce the files required to 101.

The code below is fetching all the font files at nearly the same time. I can build successfully with 404 font files after I changed Promise.all to fetching sequentially.

https://github.com/vercel/next.js/blob/22ea7d99095cee37b327c5c674a78d893b95d38c/packages/font/src/google/loader.ts#LL106C1-L140C6

Hope nextjs team can consider batching the requests here to avoid this issue

GitHub Actions often have network issues on GitHub hosted runners, so I published an action to address that. I don’t expect that to reduce the failure rate to completely zero, but the rate should drop significantly. https://github.com/smorimoto/tune-github-hosted-runner-network

I was getting the same error, you just need to update your node version to lts or 15+ and delete .next folder.

I have the same problem with node v18.12.1, next 13.1.5, @next/font: 13.1.5. deleting .next folder not work for me.

Can you update your Next? Since 13.2 I think that @next/font isn’t required, you should use next/font. Check this.

Upgrading the node version higher than 14 solved my problem.

I was running v18 and this was happening as well, so I wouldn’t advise upgrading too far up until this is fixed. I’m now using v14 and the problem is gone.

For me, I was using v14 and then I changed it to v16. It has solved my problem.

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

This issue will be fixed #51890. We now have retry logic when this fails, CLI errors that tell you about unstable network, and it’s no longer depending on AbortController. Let us know if you have other suggestions!

@SehajBindra this error still persists with Poppins font. I’m using next 13.4.10

----layout.tsx----

import './globals.scss'
import type { Metadata } from 'next'
import { Poppins } from 'next/font/google'

const poppins = Poppins({
  display: 'swap',
  weight: ['300', '400', '500', '700'],
  style: ['normal'],
  subsets: ['latin']
})

export const metadata: Metadata = {
  title: 'Xchange Next Door',
  description: 'Xchange Next Door'
}

export default function RootLayout ({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang='en'>
      <body className={poppins.className}>{children}</body>
    </html>
  )

----error----

error Failed to download 'Poppins' from Google Fonts. Using fallback font instead.
AbortError: The user aborted a request.

----package.json----

{
 ...
 "dependencies": {
   "@types/node": "20.4.2",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.10",
    "next": "13.4.10",
    "postcss": "8.4.26",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "styled-components": "^6.0.4",
    "swiper": "^10.0.4",
    "tailwind-scrollbar": "^3.0.4",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
 }
 ...
}

So Next js 13.4.13 recommends variable fonts for better optimization so after reading the the documentation I got the solution so in Poppins font weight prop is required and subsets is required when preload is set to true. So in weight prop you can only add two weight sizes as weight: ‘100 900’ for a variable font.

for further check out the docs : https://nextjs.org/docs/pages/api-reference/components/font

This worked for me !!

const poppins = Poppins({
  weight: ["400", "700"],
  subsets: ["latin"],
});

this answer worked for me https://stackoverflow.com/questions/76478043/next-js-always-fail-at-downloading-fonts-from-google-fonts

Here is how i managed to fix:

1. run nvm install --lts
2. run nvm use --lts
3. delete .next folder

Done. Now i can run npm run dev without any errors.

Im located in Russia and got this error. Fixed by using VPN.

works for me. thanks 😃

I have the same issue with next@13.4.3 (current latest) and Node.js 18.16.0 (current LTS).

I’m currently based in China and use a VPN. I suppose that the fetching from the next/font package is failing because of that. Even though I successfully can reach the fetching URL (in my case: https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap) from the browser. It works well once built and started. It only does not work when running the development server.

As a temporary fix I directly imported the Google stylesheet and removed the config related to next/font. Also, I deleted the .next folder and rerun the development server via npm run dev.

It is not ideal, but will do for now. Hope the team will take a closer look at the issue 🙏

Before

app/layout.tsx

import './styles/main.sass'
import { Source_Sans_Pro } from 'next/font/google'

const sourceSansPro = Source_Sans_Pro({
  weight: ['200', '300', '400', '600', '700', '900'],
  subsets: ['latin']
})

export const metadata = {
  title: 'Aurora - Leon\'s UI bricks',
  description: 'Aurora - Leon\'s UI bricks',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={sourceSansPro.className}>{children}</body>
    </html>
  )
}

After

app/layout.tsx

import './styles/main.sass'

export const metadata = {
  title: 'Aurora - Leon\'s UI bricks',
  description: 'Aurora - Leon\'s UI bricks',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <link
          href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap"
          rel="stylesheet"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Hope that helps.

I had a similar issue, I can’t remember because I’ve been working on a React native module recently, but I think it was because I had @next/font installed and using it. Migrating to next/font as recommended by next seems to have fixed it. At least for now.

error - Failed to download `Noto Sans KR` from Google Fonts. Using fallback font instead.
event - compiled client and server successfully in 5.1s (194 modules)
warn  - Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `npx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font

$ npx @next/codemod@latest built-in-next-font . --force                                                                 [2:01:17]
WARNING: Git directory is not clean. Forcibly continuing.
Executing command: jscodeshift --verbose=2 --ignore-pattern=**/node_modules/** --ignore-pattern=**/.next/** --extensions=tsx,ts,jsx,js --transform ~/.npm/_npx/04c93779852ad6b7/node_modules/@next/codemod/transforms/built-in-next-font.js .
Processing 53 files... 
Spawning 7 workers...
Sending 8 files to free worker...
 NOC global.d.ts
 NOC env.d.ts
 NOC jest.config.ts
 NOC next-sitemap.config.js
 NOC postcss.config.js
 NOC jest.setup.ts
 NOC next-env.d.ts
 NOC next.config.js
All done. 
Results: 
0 errors
52 unmodified
0 skipped
1 ok
Uninstalling `@next/font`
yarn remove v1.22.19
[1/2] 🗑  Removing module @next/font...
[2/2] 🔨  Regenerating lockfile and installing missing dependencies...
[#################################################################################################----------------------] 637/779

And It’s Solved the Error!

I have the same problem with node v18.12.1, next 13.1.5, @next/font: 13.1.5. deleting .next folder not work for me.

I had the same problem with node v16.19.0, deleting the .next folder solved it. I didn’t upgrade the node version.

Which version are you all using?

I am on 18.3.0. Seems like an SSL error as bazhenov said, as NODE_TLS_REJECT_UNAUTHORIZED=0 is the only thing that helps

Edit: for some reason, error is back - even with the flag (which still helps in npm run build tho)

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?

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

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

It looks like fetchFontFile function is failing with an error: https://github.com/vercel/next.js/blob/ac0b6d2a719fd6656b555dc398e73c01c71feae4/packages/font/src/google/utils.ts#L258

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.