// app/layout.tsx（App Router 推荐位置）
import { Oxygen } from 'next/font/google';

const oxygen = Oxygen({
  display: 'swap',
  variable: '--font-oxygen',
  subsets: ['latin'],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    
       {/* ✅ 关键：此处绑定 .variable */}
        {children}
      
    
  );
}

? 注意：oxygen.variable 返回的是一个字符串类名（如 _abc123），而非变量名本身；Next.js 会自动将其映射到你指定的 --font-oxygen 变量，并确保该变量在 :root 或对应作用域生效。

✅ 在 CSS 中安全使用自定义变量

一旦 oxygen.variable 被挂载到根元素，你即可在任意 CSS 文件、CSS Module 或

/* styles/globals.css */
.text-primary {
  font-family: var(--font-oxygen); /* ✅ 正确：变量已全局可用 */
  font-weight: 400;
}

.heading {
  font-family: var(--font-oxygen);
  font-weight: 700;
}

或在 CSS Modules 中：

青柚面试

简单好用的日语面试辅助工具

下载

立即学习“前端免费学习笔记（深入）”；

// components/Title.module.css
.title {
  font-family: var(--font-oxygen);
}

// components/Title.tsx
import styles from './Title.module.css';
export default function Title() {
  return 
Hello Oxygen
;
}

⚠️ 常见错误与注意事项

• ❌ 不要在组件内 import 字体后直接用 className={oxygen.className}：.className 仅用于传统 class 绑定（需手动写 font-Oxygen 类），不触发变量注入，也无法预加载。
• ❌ 不要在非根元素上单独应用 font.variable：变量注入依赖于类名挂载位置的 CSS 作用域。若只在某个
  上加 className={oxygen.variable}，其子元素无法继承 :root 级变量（除非显式重定义）。
• ✅ 预加载与 FOIT/FOUT 控制：display: 'swap' 确保文本先以系统字体显示（FOUT），待字体加载完成立即切换，彻底避免不可见文本（FOIT）——这是 Next.js 字体方案的核心优势。
• ? Pages Router 兼容性说明：上述方式在 App Router 下稳定工作；Pages Router 中需在 _app.tsx 的 外层包裹容器并绑定 font.variable，效果一致，但需确保 pages/_app.tsx 是唯一根布局入口。

✅ 进阶：多字体 + 多变量组合示例

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google';

const inter = Inter({
  variable: '--font-inter',
  subsets: ['latin'],
});

const mono = Roboto_Mono({
  variable: '--font-mono',
  subsets: ['latin'],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
       {/* 同时启用两个变量 */}
        {children}
      
    
  );
}

/* globals.css */
.sans { font-family: var(--font-inter); }
.mono { font-family: var(--font-mono); }

掌握 font.variable 的绑定逻辑，是高效、优雅地集成 Next.js 字体能力的关键一步。它让字体管理回归声明式、可组合、零运行时开销的现代前端范式——无需手动写 @font-face，不污染全局 class 命名，更无需担心渲染阻塞。