Next.js 13 + Tailwind项目中Google字体加载失败问题求助

1. 修复Tailwind配置中的空格错误 #

你的tailwind.config.js里source字体的变量后多了一个空格，这会导致CSS变量解析失败：

// 错误写法
source: ["var(--font-source) "],
// 正确写法
source: ["var(--font-source)"],

2. 确保字体weight配置匹配官方提供值 #

检查Google字体对应字体的可用weight，比如Source Serif Pro官方仅提供400（常规）、600（半粗）、700（粗体）三种weight，不存在900（黑粗）。配置不存在的weight会触发字体下载失败，修改App.js中的配置：

const source = Source_Serif_Pro({
  subsets: ["latin"],
  weight: ["400", "600", "700"], // 移除不存在的900
  variable: "--font-source",
});

3. 统一字体变量的注入方式 #

确保所有字体的CSS变量都被正确注入到DOM中，可将所有variable属性统一添加到main元素的className中：

export default function App({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} ${dm.variable} ${source.variable}`}>
      {/* 若需将Inter设为默认字体，可追加inter.className */}
      {/* <main className={`${inter.className} ${inter.variable} ${dm.variable} ${source.variable}`}> */}
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </main>
  );
}

注：inter.className会直接给元素设置默认font-family，variable则生成CSS变量供Tailwind自定义字体使用，两者可共存。

4. 验证Tailwind核心样式加载 #

检查globals.css是否包含Tailwind的核心指令，确保Tailwind能正确解析自定义字体配置：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 清理缓存并重启服务 #

除重装依赖外，清理Next.js缓存后重启服务：

# 清理Next.js缓存
npx next clean
# 重启开发服务
npm run dev

6. 排查网络访问问题（开发环境） #

开发模式下@next/font会从Google字体CDN下载文件，若网络无法访问Google服务会导致下载失败，可尝试：

• 切换可访问Google的网络环境
• 改用本地自托管字体：下载字体文件到项目中，通过next/font/local引入

内容的提问来源于stack exchange，提问作者Kevin Nyarang'o