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.

1 reply

absolutegravitas Nov 27, 2023

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

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:wght@100..900&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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 11 comments 10 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

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

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

Replies: 11 comments · 10 replies

xgqfrms Feb 16, 2023 Author

xgqfrms Feb 16, 2023 Author

same problems

VPN proxy bug

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

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

Replies: 11 comments 10 replies

xgqfrms
Feb 16, 2023
Author

xgqfrms
Feb 16, 2023
Author

`VPN` proxy bug