Next.js项目中如何用Tailwind CSS调用Fontsource的Advent Pro字体？

问题核心是浏览器未加载Fontsource包提供的@font-face规则，导致Tailwind配置的字体类 fallback 到了sans-serif。以下是无需复制node_modules内代码的解决方法：

1. 全局导入Fontsource的CSS文件 #

直接在项目的全局样式文件中导入包内的CSS即可，无需复制任何代码：

• 若使用Pages Router，修改styles/globals.css：

@import "@fontsource/advent-pro";

• 若使用App Router，修改app/globals.css：

@import "@fontsource/advent-pro";

如果只需要特定字重（比如700粗体），可以指定导入对应文件：

@import "@fontsource/advent-pro/700.css";

2. 确认Tailwind字体配置匹配 #

检查node_modules/@fontsource/advent-pro/index.css中的font-family名称，你当前Tailwind配置里的：

fontFamily: {
  adventProHeader: ['Advent Pro', 'sans-serif']
}

是完全匹配的，无需修改。

3. （可选）通过JS/TS文件导入 #

如果不想在CSS中导入，也可以在全局入口文件中直接引入CSS模块：

• Pages Router的pages/_app.js：

import "@fontsource/advent-pro";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

• App Router的app/layout.js：

import "@fontsource/advent-pro";
import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

完成以上操作后，浏览器会正确加载Advent Pro字体的@font-face规则，font-adventProHeader类即可正常生效。

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