next/font/google AbortError: The user aborted a request #55734
Replies: 33 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.
-
|
Maybe it is because of dev server is not able to download the font from google, I don't know if it is correct or not, but when i get those error I just delete the imported font and use the google instead, it is not recomended by Next.Js team, you can do this on development, but when building the app you can change those font with the imported font. |
Beta Was this translation helpful? Give feedback.
-
|
I had the same issue with the export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
// the 2 links provided by Google fonts
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
</head>
<body className={inter.className}>
... |
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.
and others
-
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