Next.js example takes a long time to compile due to Inter google fonts - next.js

Question

I'm trying with the trivial next.js example blog from their tutorial. However, when I access the page, I get the following situation:
$ npm run dev
> nextjs-blog#0.1.0 dev /Users/<redacted>/tmp/nextjs-blog
> next dev
ready - started server on 0.0.0.0:3000, URL: http://localhost:3000
event - compiled client and server successfully in 386 ms (165 modules)
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 91 ms (166 modules)
warn - Fast Refresh had to perform a full reload due to a runtime error.
wait - compiling / (client and server)...
error - Failed to download `Inter` from Google Fonts. Using fallback font instead.
event - compiled client and server successfully in 152.9s (195 modules)
error - Failed to download `Inter` from Google Fonts. Using fallback font instead.
warn - Fast Refresh had to perform a full reload due to a runtime error.
I am not sure why it hangs for two minutes and why it can't download the google fonts. I am behind a proxy, so I suspect that could be a factor, but I cannot find anything on how to set up a proxy for next.js in the configuration (assuming the actual problem is that).
Note that HTTP_PROXY and HTTPS_PROXY are set correctly.
I'm running with these:
"next": "13.0.7"
npx create-next-app#latest nextjs-blog --use-npm --example
GitHub Link
I tried as suggested to run npm run build, and I get the following:
$ npm run build
> nextjs-blog#0.1.0 build /Users/xxx/tmp/nextjs-blog
> next build
info - Linting and checking validity of types
info - Creating an optimized production build
Failed to compile.
pages/index.tsx
`#next/font` error:
Failed to fetch `Inter` from Google Fonts.
> Build failed because of webpack errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nextjs-blog#0.1.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nextjs-blog#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
The logs file does not give more info than this.

Answer 1

Same issue, I suspect it's because #next/font doesn't respect HTTPS_PROXY
environment variable. It's really frustrating for a new user (behind a proxy) who read the fantastic docs but cannot even run a minimal create-next-app project (at least the default index.js).

Answer 2

I Disconnected with the VPN and it solved this problem.

Answer 3

some solutions
solution 1
just remove the #next/font/google module, if you don't need it.
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'] })
solution 2
if you are using a VPN, quit your VPN and try it again.
As #ashwani-panwar suggested.
It works for me.
refs
https://github.com/vercel/next.js/discussions/46012

Answer 4

I had this same issue, but I wasn't behind a proxy, after a lot of code testing I discovered the fault was from #next/font/google, it stuck on compiling /page and didn't show an error. A temporary solution I found is to use a VPN service to change your IP address, there seems to be a network request issue when Next gets the fonts from the server.
Update
visiting https://fonts.google.com seems to indicate whether the issue is from Google's servers or something else, if #next/font/google is causing a slowdown visiting the fonts page ussually hangs too.