There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?fami

方案优点缺点本地托管字体（推荐）稳定、可离线、性能好需手动下载字体使用镜像源（临时）快速修复访问问题镜像不一定长期可用移除字体导入简单样式会变丑。

Dontla

913人浏览 · 2025-10-06 16:19:34

Dontla · 2025-10-06 16:19:34 发布

文章目录

问题背景
问题分析
- 1. **服务器或开发环境（例如本地或局域网）无法访问 Google 域名**（被防火墙或网络策略拦截）。
- 2. **Next.js 没有配置好字体的本地托管（self-hosting）**。
解决方法

问题背景

React项目编译的时候报错了：

在这里插入图片描述

 ⚠ [next]/internal/font/google/geist_a71539c9.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap.

Import trace:
  Server Component:
    [next]/internal/font/google/geist_a71539c9.module.css
    [next]/internal/font/google/geist_a71539c9.js
    ./src/app/layout.tsx

问题分析

这个问题是因为 Next.js 在加载 Google Fonts（Geist 字体）时无法连接到 Google 的服务器。
常见原因有两个：

1. 服务器或开发环境（例如本地或局域网）无法访问 Google 域名（被防火墙或网络策略拦截）。

2. Next.js 没有配置好字体的本地托管（self-hosting）。

解决方法

✅ 解决方法一：改成本地托管字体（推荐）（可行）

Next.js 15+ 内置了 next/font/google，你可以让它 自动下载字体到本地构建中，避免访问 Google。

修改你的 layout.tsx：

// ❌ 不要这样：
// import { Geist, Geist_Mono } from 'next/font/google';

// ✅ 改成这样：
import localFont from 'next/font/local';

const geistSans = Geist({
  src: '../fonts/Geist.woff2', // 你需要放在 /src/fonts/ 目录下
  variable: '--font-geist-sans',
  weight: '100 900',
});

const geistMono = Geist_Mono({
  src: '../fonts/GeistMono.woff2',
  variable: '--font-geist-mono',
  weight: '100 900',
});

在这里插入图片描述

然后你需要在项目里新建目录并下载字体文件：

mkdir -p src/fonts

下载字体文件（可以手动从其他机器上下载或用代理）：

在这里插入图片描述

把 .woff2 文件放到 src/fonts/ 下。

（说是改了，之前文件改成后面加了[wght]，似乎没报错了。）

在这里插入图片描述

✅ 解决方法二：配置代理或使用镜像（适合临时调试）

如果你只是临时开发想让 Google Fonts 能访问，可以使用字体镜像：

在你的 layout.tsx 中找到：

import { Geist, Geist_Mono } from "next/font/google";

改成：

import { createFont } from "next/font";

export const geist = createFont({
  src: "https://fonts.loli.net/css2?family=Geist:wght@100..900&display=swap",
});
export const geistMono = createFont({
  src: "https://fonts.loli.net/css2?family=Geist+Mono:wght@100..900&display=swap",
});

或者直接在 CSS 中换用国内可访问的镜像：

@import url('https://fonts.loli.net/css2?family=Geist:wght@100..900&display=swap');

✅ 解决方法三：忽略字体加载错误（不推荐）

如果只是想临时不加载字体，可在 layout.tsx 中注释掉：

// import { Geist, Geist_Mono } from "next/font/google";

改用系统默认字体，比如：

<body className="font-sans">...</body>

💡推荐做法总结

方案	优点	缺点
本地托管字体（推荐）	稳定、可离线、性能好	需手动下载字体
使用镜像源（临时）	快速修复访问问题	镜像不一定长期可用
移除字体导入	简单	样式会变丑