Error 'Failed to fetch Noto Sans JP from Google Fonts.'
#45080
Comments
|
The error happens with other fonts such as |
|
It looks like next.js/packages/font/src/google/utils.ts Line 258 in ac0b6d2 I can access the URL via the browser/curl, so I think it's not the internet connection issue. |
|
Have the same issue with default create-next-app skeleton. Seems like a SSL related error. Running |
|
Hey @max-ch9i, did you get any workaround I'm also facing the same error. |
|
@Shahzad6077 I just added font |
|
Another workaround is downloading the fonts manually and using |
|
Yes I have downloaded the fonts locally and use |
|
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 |
|
Removing the |
|
Hmm. The problem still occurs for me after removing |
|
Removing |
|
I've stumbled on this issue again after updating 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 |
|
Strange, just a few days after I got the error, I didn't change anything (perhaps removed the Nvm: error is back. |
|
I still have an issue :| Next 13.2.1 |
|
I have the same issue on: 13.2.4 |
|
Same on import { Inter, Yeseva_One } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
});
const yeseva_one = Yeseva_One({
subsets: ["latin"],
variable: "--font-yeseva-one",
weight: ["400"],
});And when I run |
|
Mmm... maybe it's a issue with the node version? When running Looking for AbortController, I've found that node includes it since |
I am on Edit: for some reason, error is back - even with the flag (which still helps in |
Well, for me Maybe there are two errors here 🤷 |
|
Ups. I'm receiving this error again, but now deploying to Vercel. import { Noto_Sans_Mono, Work_Sans } from "next/font/google";
const notoSansMono = Noto_Sans_Mono({
subsets: ["latin"],
variable: "--font-noto-sans-mono",
});
const workSans = Work_Sans({
subsets: ["latin"],
variable: "--font-work-sans",
}); |
|
@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! |
As I mentioned here, in my local I have node |
|
As mentioned upgrading node version then removing |
Bingo! My code editor reverted back to an old version. running |
|
upgrading node and removing .next did not work to me. Neither using lts. I only have this problem while running |
|
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. |
|
Same issue in WSL ubuntu after upgrade also. Any fix? |
|
For me, unstable internet connection was the issue, it didn't work locally but build passes on Vercel deployments |
|
Here is how i managed to fix:
Done. Now i can run |
Improve the problems mentioned in #45080. - Adding error retries (3 attempts) to font fetching. When you have a slow network, it might take >3s to load. - Improve the error message to tell you that you might have unstable network connection. - Do not cause build error (caused by missing `AbortController`) in Node 14 (even if we don't support Node 14, better to pass the build instead of hard error).
|
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 Let us know if you have other suggestions! |
I have a pretty reasonable connection, but would continually get this error in development. This seems to be an issue with the size of the fonts you want to use as I was having no problem with IBM-Plex-Mono at ~136kb per weight and lots of problems with Dongle at ~4775kb per weight, according to local file sizes after downloading from Google Fonts. Reconfigured to have Dongle in
import { IBM_Plex_Mono } from 'next/font/google';
import localFont from 'next/font/local';
export const plexmono = IBM_Plex_Mono({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700'],
variable: '--font-plexmono',
});
export const dongle = localFont({
src: [
{
path: '../styles/fonts/Dongle-Light.ttf',
weight: '300',
style: 'thin',
},
{
path: '../styles/fonts/Dongle-Regular.ttf',
weight: '400',
style: 'normal',
},
{
path: '../styles/fonts/Dongle-Bold.ttf',
weight: '700',
style: 'bold',
},
],
variable: '--font-dongle',
});
. . .
<main className={`${dongle.variable} ${plexmono.variable}`}>
<Layout>
<Component {...pageProps} />
</Layout>
</main>
. . .
theme: {
. . .
},
extend: {
fontFamily: {
body: ['var(--font-plexmono)'],
heading: ['var(--font-dongle)'],
},
. . .
} |
|
Was this ever solved? This is hit and miss for me. Sometimes it just works then all of a sudden it doesn't work. Happens regardless of what font I use or what network I'm on. If it may help. |
### for me, this worked set preload:false |
|
this answer worked for me |
|
a temporary expedient // in _app.tsx
/* eslint-disable react/no-unknown-property */
/* eslint-disable camelcase */
import { useTranslation } from 'next-i18next';
import { Noto_Sans_KR, Inter } from 'next/font/google';
import Head from 'next/head';
import type { LocaleType } from '@interfaces/default';
const notosansKR = Noto_Sans_KR({
weight: ['100', '300', '400', '500', '700', '900'],
display: 'auto',
subsets: ['latin'],
style: 'normal',
variable: '--noto-sans_KR',
preload: true,
});
const inter = Inter({
weight: ['400', '700', '800'],
subsets: ['latin'],
display: 'fallback',
fallback: ['-apple-system', 'sans-serif'],
});
const GlobalFont = ({ children }: { children: React.ReactNode }) => {
const { i18n } = useTranslation('');
const renderFontLink = (currentLocale: LocaleType): JSX.Element | null => {
switch (currentLocale) {
case 'ja':
return (
<link
rel='stylesheet'
href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap'
/>
);
default:
return null;
}
};
return (
<>
<Head>
<link rel='preconnect' href='https://fonts.googleapis.com' />
<link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin='' />
{renderFontLink(i18n.language)}
</Head>
{process.env.NODE_ENV !== 'development' ? (
<style jsx global>
{`
body {
font-family: ${notosansKR.style.fontFamily}, 'Noto Sans JP', -apple-system, sans-serif;
}
.inter-font {
font-family: ${inter.style.fontFamily};
}
`}
</style>
) : null}
{children}
</>
);
};
export default GlobalFont;// in _app.tsx
import { css, Global } from '@emotion/react';
const GlobalStyles = (
<Global
styles={css`
* {
font-family: ${process.env.NODE_ENV === 'development'
? "'Noto Sans KR', 'Noto Sans JP', -apple-system, sans-serif;"
: ''};
}
.inter-font {
font-family: ${process.env.NODE_ENV === 'development'
? "'Inter', 'Noto Sans KR', sans-serif;"
: ''};
}
`}
/>
);
export default GlobalStyles;But, There is an issue with warnings in the browser console.
|
|
Tangential to the original issue, but I made a package that nice when you need to work with Japanese fonts: https://www.npmjs.com/package/react-content-font |
|
Sorry if anyone already mentioned it but i found an interesting workaround trying to solve this problem:
Using the as keyword to rename the font I can forget about the issue |
@SehajBindra this error still persists with ----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"
}
...
} |
|
I've encountered issues with different fonts bearing various names. This situation has been disrupting my development and continuous integration (CI) workflows. Despite the passage of several months, the most reliable solution I've found is to download the fonts and utilize them locally through |
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 !! |
|
I keep experiencing this issue very intermittently. SOmetimes it loads all fonts, sometimes none, and sometimes only one (I am using 4 different fonts). I initially thought this was due to bad connectivity but I am experiencing this on a decent connection (>40Mbps) so I am sure that can not be the issue. When I build the app on Vercel I get no issues so it is working fine in production, but in dev it makes it very difficult to work with, because everything looks ugly as it falls back to the default font. For context I keep on seeing the following message |
|
I changed the node version, removed the .next folder and it worked. My recommendation is to look if you have several versions of node installed and make sure you use the correct version, in this case for me version My problem was that when I did Before After |
|
restarting my internet connection (wi-fi) and deleting |
|
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
and others
Verify canary release
Provide environment information
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
results in
Possibly related to #44594
and 5f2c9d0
Expected Behavior
Compiles successfully.
The text was updated successfully, but these errors were encountered: