next/font/google AbortError: The user aborted a request #55734
Replies: 35 comments 13 replies
-
|
I'm on 13.5.2 and the same issue is happening in my project
|
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue, sometimes the fonts work by themselves and sometimes I do get these errors without changing anything in the layout page This is the error form the console This is how I'm importing the font import { Poppins, Raleway } from 'next/font/google';
import './globals.scss'
import Header from './components/Header';
import Footer from './components/Footer';
const raleway = Raleway({
subsets: ['latin'],
display: 'swap',
variable: '--font-raleway',
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
const poppins = Poppins({
subsets: ['latin'],
display: 'swap',
variable: '--font-poppins',
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${poppins.variable} ${raleway.variable}`}>
<body>
<Header />
{children}
<Footer />
</body>
</html>
)
}Also, note that I'm using SCSS and importing the font as variables like so: html {
font-size: 10px; // 1rem === 10px
scroll-behavior: smooth;
font-family: var(--font-poppins);
}
h1, h2, h3 {
font-family: var(--font-raleway);
}
|
Beta Was this translation helpful? Give feedback.
-
|
Same erro for me, im using pages directory and works well when is deployed but in local never load the fonts |
Beta Was this translation helpful? Give feedback.
-
|
I do get the same error ... :) |
Beta Was this translation helpful? Give feedback.
-
|
I am getting the same error on next v13.5 (with pages directory). |
Beta Was this translation helpful? Give feedback.
-
|
Update: Step 0: delete the .next folder if it exists 😃 |
Beta Was this translation helpful? Give feedback.
-
|
forever thanks, brother |
Beta Was this translation helpful? Give feedback.
-
|
@theGobindSingh it's still not working. My builds fail because of not able to download the fonts. I tried deleting .next folder and then do npm run build. But this build keeps failing. Can you pls help with this? I'm using next.js 14.2.10 |
Beta Was this translation helpful? Give feedback.
-
|
I'm experiencing the same issue. |
Beta Was this translation helpful? Give feedback.
-
|
A temporary fix is that you build your project locally, then run your dev server, it should work. |
Beta Was this translation helpful? Give feedback.
-
|
Tried this with my fingers crossed but it didn't work for me. |
Beta Was this translation helpful? Give feedback.
-
|
@Ashley-King could you please delete your .next folder, run the build and then run dev server? |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @theGobindSingh! I did not delete my .next folder the first time. I've followed your instructions with nextjs 13.5.3 and nextjs 14.0.3 and it DOES work for me. The error I was getting was a socket hang up during the google font api request. It retries 3 times and then gives up. Now I'm not getting the error at all. Is the request going through now or is it your code magic? Doesn't matter. It works! 😀 Thanks for the help! |
Beta Was this translation helpful? Give feedback.
-
|
@Ashley-King that's great 😃 you're welcome 🫂 |
Beta Was this translation helpful? Give feedback.
-
|
I'm also facing similar issue, @aaronbrown-vercel, Please help with this. - error Failed to download `IBM Plex Mono` from Google Fonts. Using fallback font instead.
AbortError: The user aborted a request.
at abort (/Users/syedanique/Desktop/Qode/platform/node_modules/next/dist/compiled/node-fetch/index.js:1:65190) |
Beta Was this translation helpful? Give feedback.
-
|
I get the same error |
Beta Was this translation helpful? Give feedback.
-
|
I get the same error |
Beta Was this translation helpful? Give feedback.
-
|
Same error here. The user aborted a request. Did the build trick with no luck. Utterly annoying. I ended up rebooting the project. |
Beta Was this translation helpful? Give feedback.
-
|
Could you please delete your .next folder before making the build and then try? |
Beta Was this translation helpful? Give feedback.
-
|
I'm experiencing the same error. ( One thing I can say for certain is that the |
Beta Was this translation helpful? Give feedback.
-
|
I managed to successfully load the fonts by deleting the |
Beta Was this translation helpful? Give feedback.
-
|
Just worked for me by deleting the .next and running again the app |
Beta Was this translation helpful? Give feedback.
-
|
Same problem here. Sometimes it takes deleting the .next folder multiple times to do the trick, especially when you're using several fonts. Hope there'll be a proper fix to it. |
Beta Was this translation helpful? Give feedback.
-
|
This error could be fixed by restarting you dev server, and make sure that you have a good internet connection to download the fonts. If not work just delete .next folder from you project and restart by running |
Beta Was this translation helpful? Give feedback.
-
|
This happened to me, because I was on a VPN that for some reason couldn't reach the font. Turning off my VPN resolved the issue. |
Beta Was this translation helpful? Give feedback.
-
|
Same error for me... deleted .next => not working |
Beta Was this translation helpful? Give feedback.
-
|
clear cache your browser. |
Beta Was this translation helpful? Give feedback.
-
|
I just ran into this issue while it's just fine 1 hour ago before I took a nap |
Beta Was this translation helpful? Give feedback.
-
|
I turned off VPN and it worked. I turned it on a few hours later and the issue was gone. |
Beta Was this translation helpful? Give feedback.
-
|
clear cache/cookie your browser. |
Beta Was this translation helpful? Give feedback.
-
|
Same issue, node 20, next 14 (app router) - nothing mentioned above works, except for turning on VPN |
Beta Was this translation helpful? Give feedback.
-
|
The same error here, it just happens with some fonts in my case:
|
Beta Was this translation helpful? Give feedback.
-
|
After closing vnp, the problem was solved |
Beta Was this translation helpful? Give feedback.
-
|
This is still not working for me, I did the following:
None of those things worked. My specs are:
|
Beta Was this translation helpful? Give feedback.
-
|
Same. |
Beta Was this translation helpful? Give feedback.
-
|
any solutions? |
Beta Was this translation helpful? Give feedback.
-
|
i have the same error. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same error too. I've turned off the VPN, the still same error. |
Beta Was this translation helpful? Give feedback.
-
|
this is webpack issue. you can use turbo to fix this. but when you build, still error. |
Beta Was this translation helpful? Give feedback.
-
|
The problem is that if you look into the font fetcher script at SOLUTION: In the mentioned file, just change the timeout to more (like BTW, I am using nextjs |
Beta Was this translation helpful? Give feedback.
-
|
So basically there is no solution, except installing the font from other source |
Beta Was this translation helpful? Give feedback.
-
|
In my case, i just deleted .next folder and node_modules. Reconnected to my wifi and it worked. |
Beta Was this translation helpful? Give feedback.
-
|
In a lot of cases, deleting @sarsamurmu's solution works. Seems to be the best monkey patch in this thread. |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
-
I'm getting this error when downloading a font from google, only locally. When testing in
stagingthe font is downloaded with success. I'm using next v15Beta Was this translation helpful? Give feedback.
All reactions