在 next.js 13 引入 app router 架构后，传统的通过 <link> 标签在 _document.js 或 _app.js 文件中引入 google fonts 的方式不再适用，同样，在全局 css 中使用 @import 也无法达到预期效果。next.js 官方为此提供了一个现代化的解决方案，即使用 next/font 模块来优化和集成字体。这种方法不仅简化了字体管理，还带来了诸多性能优势，如自动字体优化、减少布局偏移（cls）和更快的加载速度。
核心方法：使用 next/font/google 模块
next/font/google 模块是 Next.js 13+ 中处理 Google Fonts 的推荐方式。它会自动下载字体文件并将其托管在您的应用程序中，从而避免了额外的网络请求和潜在的性能问题。
1. 配置 Google 字体
首先，在您的 app/layout.js（或任何需要全局应用字体的布局文件）中导入并配置您希望使用的 Google 字体。以 Poppins 字体为例：
// app/layout.js
import { Poppins } from 'next/font/google';
// 配置 Poppins 字体
const poppins = Poppins({
subsets: ['latin'], // 指定字体子集，减少文件大小
display: 'swap', // 字体加载策略，确保文本始终可见
variable: '--font-poppins', // 定义一个 CSS 变量名，方便在 CSS 中引用
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] // 指定需要加载的字重
});
export const metadata = {
title: '您的页面标题',
description: '您的页面描述',
}
export default function RootLayout({ children }) {
return (
// 将字体变量应用到 HTML 根元素
<html lang="zh-CN" className={`${poppins.variable}`}>
<body>{children}</body>
</html>
)
}参数解释：
- subsets: 定义需要加载的字体子集。通常设置为 ['latin']。
- display: 控制字体加载时的行为。'swap' 是一个常用值，它允许浏览器在字体加载完成前使用系统默认字体渲染文本，加载完成后再替换为 Google 字体，从而避免了文本不可见（FOIT）的问题。
- variable: 这是一个关键参数。它允许您为字体定义一个 CSS 变量（例如 --font-poppins），方便在后续的 CSS 样式中引用。
- weight: 指定您需要加载的字体字重。只加载必要的字重可以有效减少字体文件大小。
2. 将字体应用到 HTML 结构
在 app/layout.js 中，通过将配置好的字体实例的 variable 属性添加到 <html> 元素的 className 中，可以将字体变量全局化。这样，该 CSS 变量将在整个应用程序中可用。
// app/layout.js (部分代码)
// ...
export default function RootLayout({ children }) {
return (
<html lang="zh-CN" className={`${poppins.variable}`}> {/* 注意这里的 className */}
<body>{children}</body>
</html>
)
}3. 在 CSS 中使用字体
一旦字体变量被定义并应用到 HTML 根元素，您就可以在任何 CSS 文件中通过 var() 函数来引用它。
例如，在您的全局 CSS 文件 (app/globals.css) 或任何组件的 CSS 模块中：
/* app/globals.css 或其他 CSS 文件 */
body {
font-family: var(--font-poppins), sans-serif; /* 使用定义的 CSS 变量 */
}
.custom-text {
font-family: var(--font-poppins), serif;
font-weight: 500;
}通过这种方式，所有应用了 font-family: var(--font-poppins) 的元素都将使用 Poppins 字体。
优势与注意事项
- 性能优化： next/font 模块会自动处理字体加载，包括消除布局偏移（CLS）、减少网络请求、优化字体文件大小等，从而显著提升页面加载性能和用户体验。
- 类型安全： next/font 提供了更好的 TypeScript 支持，使得字体配置更加类型安全。
- 自动本地化： 字体文件会由 Next.js 自动下载并托管，无需担心 CDN 不可用或网络延迟问题。
- 告别旧方法： _document.js 和 _app.js 在 App Router 中被 layout.js 和 template.js 等文件取代，因此传统的 <link> 标签方式不再有效。@import 方式也因其性能劣势而不被推荐。
总结
在 Next.js 13+ 项目中集成 Google Fonts，推荐且高效的方式是利用 next/font/google 模块。通过在 app/layout.js 中配置字体并将其 CSS 变量应用到 <html> 元素，您可以在整个应用程序中灵活地使用这些字体，同时享受 Next.js 提供的性能优化和更好的开发体验。这种现代化方法不仅解决了旧版 Next.js 中遇到的字体导入问题，也符合当前 Web 开发的最佳实践。
