Next.js Fonts与CSS变量使用问题：自定义字体配置不生效求助

核心问题是你没有将next/font生成的字体变量挂载到DOM节点上，导致全局CSS无法读取到该变量。以下是具体修正步骤：

1. 将字体变量挂载到全局根元素（推荐用Layout） #

Next.js 13+的layout.js是全局布局组件，适合用来挂载全局字体变量，确保所有页面都能访问到：

// app/layout.js
import { Oxygen } from "next/font/google";
import "./globals.css";

// 初始化字体
const oxygen = Oxygen({
  display: 'swap',
  variable: '--font-oxygen',
  subsets: ['latin'],
});

export default function RootLayout({ children }) {
  return (
    // 将字体变量添加到html标签的className中
    <html lang="zh-CN" className={oxygen.variable}>
      <body>{children}</body>
    </html>
  );
}

2. 在CSS中正常使用变量 #

此时你的全局CSS（如globals.css）或组件CSS中使用var(--font-oxygen)就会生效：

/* globals.css */
body {
  font-family: var(--font-oxygen), sans-serif;
}

关键原理说明 #

next/font生成的CSS变量并非全局自动注入，而是通过oxygen.variable对应的类名，将包含变量的样式动态添加到DOM元素上。只有当该元素（及其子元素）应用了这个类，变量才能被CSS读取。如果仅在page.js中导出字体变量却不挂载到任何DOM节点，变量根本不会被注入到页面样式中，自然无法生效。

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