Next.js v13中如何正确使用@next/font配置两款Google字体？

一、为什么未使用header变量仍会下载Alegreya Sans字体？ #

@next/font的核心运行逻辑是：只要调用了字体导出的函数（比如Alegreya_Sans({...})），Next.js就会自动触发字体加载流程——它会生成对应的@font-face CSS规则，默认将字体文件自托管，也可配置从Google Fonts请求，随后把这些CSS注入到页面中。这个过程和你是否使用函数返回的变量（比如header）无关，函数执行本身就会触发字体加载。

二、能不能不声明变量直接调用字体函数？ #

可以，但不推荐。直接执行Alegreya_Sans({ subsets: ["latin"], weight: "500" })确实能触发字体加载，但这样你就无法获取函数返回的className或variable属性，没法利用@next/font提供的灵活样式控制（比如通过CSS变量统一管理字体），后续维护也不够清晰。

三、当前配置的优化建议（双字体最优方案） #

你现在的配置能运行，但没有完全利用@next/font的字体优化能力（比如预加载、避免无样式文本闪烁），且样式管理不够统一。推荐调整为以下方案：

1. 修改layout.tsx：给标题字体添加CSS变量 #

import { Alegreya_Sans, PT_Sans } from "@next/font/google";
import "../styles/globals.css";

// 标题字体：添加variable参数
const headerFont = Alegreya_Sans({
  subsets: ["latin"],
  weight: "500",
  variable: "--font-header",
});

// 正文字体保持原有配置
const bodyFont = PT_Sans({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-body",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en-us" className={`${headerFont.variable} ${bodyFont.variable}`}>
      <head />
      <body className="font-body">
        {children}
      </body>
    </html>
  );
}

2. 修改tailwind.config.js：扩展标题字体的Tailwind配置 #

const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx}",
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        body: ["var(--font-body)", ...defaultTheme.fontFamily.sans],
        header: ["var(--font-header)", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
};

3. 修改globals.css：用Tailwind的字体变量统一设置标题样式 #

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

@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-header);
    font-weight: 500;
    /* 或者直接用Tailwind类：@apply font-header font-medium; */
  }
}

方案优势： #

• 完全利用@next/font的优化：自动预加载字体、自托管字体文件（避免第三方依赖延迟）、自动处理字体格式兼容性
• 样式管理统一：通过CSS变量和Tailwind配置绑定，字体变更只需修改一处
• 代码逻辑清晰：所有字体变量都被明确使用，避免无意义的资源加载疑惑

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