Error [NextFontError]: Failed to fetch `Inter` from Google Fonts. #46012

xgqfrms · 2023-02-16T17:58:28Z

xgqfrms
Feb 16, 2023

Error [NextFontError]: Failed to fetch `Inter` from Google Fonts.

why not use locally google fonts?

$ yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1856 ms (165 modules)
wait  - compiling / (client and server)...
Error [NextFontError]: Failed to fetch `Inter` from Google Fonts.
    at nextFontError (/Users/xgqfrms-mm/Documents/github/ChatGPT/chat-gpt/node_modules/@next/font/dist/utils.js:55:17)
    at downloadGoogleFonts (/Users/xgqfrms-mm/Documents/github/ChatGPT/chat-gpt/node_modules/@next/font/dist/google/loader.js:87:39)
    at /Users/xgqfrms-mm/Documents/github/ChatGPT/chat-gpt/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:52:99
    at async Span.traceAsyncFn (/Users/xgqfrms-mm/Documents/github/ChatGPT/chat-gpt/node_modules/next/dist/trace/trace.js:79:20)
error - Failed to download `Inter` from Google Fonts. Using fallback font instead.
event - compiled client and server successfully in 75.4s (194 modules)
wait  - compiling...
wait  - compiling / (client and server)...
event - compiled client and server successfully in 75.2s (183 modules)

Answered by xgqfrms

Feb 16, 2023

import Head from 'next/head'
import Image from 'next/image'
- import { Inter } from '@next/font/google'
import styles from '@/styles/Home.module.css'

- const inter = Inter({ subsets: ['latin'] })

View full answer

xgqfrms · 2023-02-16T18:05:22Z

xgqfrms
Feb 16, 2023
Author

import Head from 'next/head'
import Image from 'next/image'
- import { Inter } from '@next/font/google'
import styles from '@/styles/Home.module.css'

- const inter = Inter({ subsets: ['latin'] })

1 reply

lukethacoder Apr 28, 2023

Not really an answer, but does solve the rendering issues.

If you actually need the fonts, it might be worth bumping your Next package version. I'm rocking v13.3.1 now and it seems to be working fine.

xgqfrms · 2023-02-16T18:06:45Z

xgqfrms
Feb 16, 2023
Author

same problems

https://stackoverflow.com/questions/74889692/next-js-example-takes-a-long-time-to-compile-due-to-inter-google-fonts

`VPN` proxy bug

#45034

0 replies

smyja · 2023-08-06T15:42:56Z

smyja
Aug 6, 2023

same issue, i'm not using a vpn.

0 replies

javierdev0 · 2023-08-16T14:02:22Z

javierdev0
Aug 16, 2023

This work for me #45080 (comment)

1 reply

mapsgeek Sep 8, 2023

same

vbandaragoda · 2023-10-11T10:16:44Z

vbandaragoda
Oct 11, 2023

Update your project as follows.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",

// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
sans: [
      "Inter",
      "ui-sans-serif",
      "system-ui",
      "-apple-system",
      "system-ui",
      "Segoe UI",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "Noto Sans",
      "sans-serif",
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji",
    ],
sans: [
      "Inter",
      "ui-sans-serif",
      "system-ui",
      "-apple-system",
      "system-ui",
      "Segoe UI",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "Noto Sans",
      "sans-serif",
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji",
    ],
},
},
},
plugins: [],
};

next.config.js

/** @type {import('next').NextConfig} */
 const nextConfig = {
  swcMinify: true,
  };

  module.exports = nextConfig;

globals.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

 html,
 body {
  padding: 0;
  margin: 0;
  overflow: auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }

layout.js

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
     <body className={inter.className}>{children}</body>
    </html>
 )
}

after updating those files please restart the project and clear the browser cache.

0 replies

italobarrosme · 2023-11-02T13:49:54Z

italobarrosme
Nov 2, 2023

if weight is assigned, remove

example

const nunito = Nunito_Sans({
  weight: '400', ✖️
  subsets: ['latin'],
  display: 'swap',
  adjustFontFallback: false,
})`

0 replies

franva · 2023-11-11T23:23:10Z

franva
Nov 11, 2023

In the Nextjs tutorial, this error still happens and I'm not using a proxy.
The code I'm using is provided by the tutorial
https://nextjs.org/learn/dashboard-app

Next.js 14.0.0
react: 18.2.0

0 replies

PiusLucky · 2023-11-23T10:33:02Z

PiusLucky
Nov 23, 2023

Late to the Party.

For others that might be having similar issue.

Remove your .next folder

rm -rf .next

Run build again

yarn build

Restart your server.

2 replies

absolutegravitas Nov 27, 2023

i have to do this every time... isnt there a better way...

yusuphwickama May 14, 2025

Adding this as a RUN command on my Dockerfile worked!

dalmasonto · 2024-05-06T17:24:40Z

dalmasonto
May 6, 2024

For my case it was the internet I was using. Somehow it was making next not to be able to download the font. After switching the internet, it worked fine.

0 replies

Cauen · 2024-06-29T11:40:31Z

Cauen
Jun 29, 2024

For me i've fixed removing the font declaration from a deep layout file

// src/app/dashboard/certificates/models/layout.tsx ❌
const fontRobotoSans = Roboto({
  weight: ['100', '300', '400', '500'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  variable: '--font-roboto',
  display: 'swap',
})

And export it from a src/app/fonts.ts file

/// src/app/fonts.ts ✅
import { Inter, Roboto } from 'next/font/google'

export const fontInterSans = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export const fontRobotoSans = Roboto({
  weight: ['100', '300', '400', '500'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  variable: '--font-roboto',
  display: 'swap',
})

0 replies

jmotes · 2024-06-29T20:19:19Z

jmotes
Jun 29, 2024

I'm having this issue when using the app router (Next.js 14.2.4) with Turbopack inside a docker container. I've tried rm -rf .next suggested but it doesn't help with dev mode. The fonts load just fine with npm run start though.

My error message:

Failed to download `Inter` from Google Fonts. Using fallback font instead.
 ✓ Compiled / in 28.2s
 ⚠ [next]/internal/font/google/inter_c4e516d6.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap.

I've verified the issue goes away if I run the project outside of docker. Any ideas on how to solve the issue specifically for Turbopack+Docker?

7 replies

jmotes Jul 9, 2024

Ohhh, I almost forgot! I opened a new issue for this: #67324

While setting up the minimal repro for the issue, I discovered that the Node alpine docker image works fine if switching to it is an option.

amdlemos Jul 9, 2024

I managed to solve the problem, in my docker compose I added dns as below, it worked perfectly:

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    dns:
      - 8.8.8.8
      - 8.8.4.4

jmotes Jul 9, 2024

Nice! I wonder why this is only required when using Turbopack. Maybe it has it's own DNS resolver that this overrides somehow?

jmotes Jul 9, 2024

@amdlemos would you mind sharing your findings on the ticket I created? Maybe it would help the team narrow down the issue.

amdlemos Jul 9, 2024

I tested your repository from issue #67324 and here it was normal without DNS. After taking a closer look at this issue here I noticed that I am not using the turbopack. But from what I understand it was a timeout problem. The build of my application that took almost 7s dropped to a little over 2.5s. So I don't know how to explain exactly what was causing the problem. I believe it was the response time.

Look at the difference in build time with and without dns

usrrname · 2024-12-12T15:26:58Z

usrrname
Dec 12, 2024

Same issue, not on VPN, have a named export of Inter.

0 replies

SadmanYasar · 2025-03-02T17:31:02Z

SadmanYasar
Mar 2, 2025

I was facing this issue and restarted my laptop then removed .next and ran npm install then npm run build and it got fixed.
Macbook Pro (MacOS Sequoia 15.3.1)
Nextjs v14.2.0
Nodejs v20

0 replies

apuatcfbd · 2025-05-15T12:18:07Z

apuatcfbd
May 15, 2025

I'm having the same issue, Following is the output

> env-cmd -f .env.development next build
▲ Next.js 15.2.4

   Creating an optimized production build ...


Retrying 1/3...


Retrying 2/3...


Retrying 3/3...
[AggregateError: ] { code: 'ETIMEDOUT' }
Failed to compile.

src/app/layout.tsx
`next/font` error:
Failed to fetch `Inter` from Google Fonts.


> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.

Then I wanted to check if the website is reachable

> curl https://fonts.googleapis.com/css2?family=Inter&display=swap
[1]+  Done                    curl https://fonts.googleapis.com/css2?family=Inter
[1] 179498
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype');
}

It means the website is reachable. So what? may b the font itself is not available?

> wget https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf
[1]+  Done                    curl https://fonts.googleapis.com/css2?family=Inter
--2025-05-15 18:11:20--  https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf
Resolving fonts.gstatic.com (fonts.gstatic.com)... 142.250.199.163, 2404:6800:4002:81b::2003
Connecting to fonts.gstatic.com (fonts.gstatic.com)|142.250.199.163|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 324820 (317K) [font/ttf]
Saving to: ‘UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf’

UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2bo 100%[=================================================================>] 317.21K  1.22MB/s    in 0.3s    

2025-05-15 18:11:21 (1.22 MB/s) - ‘UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf’ saved [324820/324820]

It appears that the font itself also available. Why Next.js failing to build? There's no proxy / VPN in the machine.

FYI:
In my local machine it builds perfectly the OS is Ubuntu 24.04
In another PC (where the problem is occurring) it is not working, that machine is on CentOS 9
both are using same network !

0 replies

sarthaksharma27 · 2025-07-27T02:52:48Z

sarthaksharma27
Jul 27, 2025

Facing the same issue so i clear my browser cache and build again and it's worked fine.

1 reply

apuatcfbd Jul 29, 2025

clearing browser cache making build successful !! where's the connection?

monolithed · 2025-08-05T15:33:31Z

monolithed
Aug 5, 2025

Here's what worked for me:

export NODE_OPTIONS="--network-family-autoselection-attempt-timeout=500"

0 replies

Error [NextFontError]: Failed to fetch Inter from Google Fonts. #46012

Uh oh!

Uh oh!

Error [NextFontError]: Failed to fetch Inter from Google Fonts.

Replies: 16 comments · 12 replies

Uh oh!

xgqfrms Feb 16, 2023 Author

Uh oh!

Uh oh!

Uh oh!

xgqfrms Feb 16, 2023 Author

same problems

VPN proxy bug

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Error [NextFontError]: Failed to fetch `Inter` from Google Fonts. #46012

Error [NextFontError]: Failed to fetch `Inter` from Google Fonts.

Replies: 16 comments 12 replies

xgqfrms
Feb 16, 2023
Author

xgqfrms
Feb 16, 2023
Author

`VPN` proxy bug