Next.js启动时无法下载Google Fonts的Inter字体求助

问题背景 #

使用create-next-app创建的Next.js 13.4项目，启动时出现ENETUNREACH错误，无法从Google Fonts下载Inter字体，只能使用fallback字体，但浏览器可正常访问该字体URL，排除网络访问本身的问题。

解决方案 #

方案1：手动下载字体并本地引入 #

绕过Node.js层面的字体下载流程，直接本地托管字体：

1. 打开报错信息中的字体URL（https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2），将字体文件下载到本地。
2. 在项目根目录的public文件夹下创建fonts目录，把下载的woff2文件放入其中。
3. 修改src/app/globals.css，添加字体声明和样式类：

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2') format('woff2');
  font-display: swap;
}

.font-inter {
  font-family: 'Inter', sans-serif;
}

4. 修改src/app/layout.tsx，移除next/font/google的引入，改用本地字体类：

import './globals.css'

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="font-inter">{children}</body>
    </html>
  )
}

方案2：调整Next.js字体加载配置，避免构建时下载 #

让浏览器直接加载字体，跳过Node.js在启动时的下载步骤：
修改src/app/layout.tsx中的Inter字体配置，添加preload: false参数：

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

// 禁用预加载，让浏览器自行请求字体
const inter = Inter({ subsets: ['latin'], preload: false })

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

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

这样Next.js不会在启动时尝试下载字体，而是生成对应的CSS让浏览器去请求，利用浏览器的网络访问能力解决问题。

方案3：检查Node.js进程的网络权限 #

虽然浏览器能访问，但可能本地防火墙或安全软件限制了Node.js进程的网络请求：

• 检查系统防火墙设置，确保允许node.exe访问外部网络。
• 若使用代理，确认Node.js已正确读取系统的HTTP_PROXY/HTTPS_PROXY环境变量，可在终端输入echo %HTTP_PROXY%（Windows）或echo $HTTP_PROXY（Linux/macOS）验证。

内容的提问来源于stack exchange，提问作者Kevin Mahrous