如何正确将next/font与Tailwind CSS v3集成以使用自定义字体？

排查与修复步骤 #

1. 修复类名拼接方式 #

你的_app.tsx中用加号拼接类名容易引发格式问题，改用模板字符串确保类名正确注入：

import { Outfit } from 'next/font/google';

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

function MyApp({ Component, pageProps }) {
  return (
    <div className={`${outfit.variable} font-sans`}>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

2. 优化Tailwind字体配置 #

如果想更清晰地控制字体类名，可将Tailwind配置中的字体别名改为自定义名称，避免和默认sans混淆：

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        outfit: ['var(--font-outfit)', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

调用时直接使用自定义类名：

<h1 className="text-6xl text-green-text font-outfit pt-36">

3. 显式指定字体权重（可选） #

若字体仍未显示，可能是默认权重未加载，在字体配置中添加所需权重：

const outfit = Outfit({
  subsets: ['latin'],
  variable: '--font-outfit',
  weight: ['400', '700'], // 根据需求指定权重范围
});

4. 清除缓存并重启服务 #

Next.js开发缓存可能导致样式不更新，执行以下命令重置：

rm -rf .next
npm run dev

5. 检查样式覆盖情况 #

打开浏览器开发者工具，查看目标元素的font-family属性，确认var(--font-outfit)是否被正确应用，排查是否有其他高优先级样式覆盖。

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