Next.js+Tailwind CSS本地Rubik静态字体无法生效问题求助

以下是你代码中的关键错误及修正方案：

错误点分析 #

• CSS语法错误：@fontface 拼写错误，正确写法是 @font-face（必须包含连字符），浏览器无法识别错误的规则，导致字体定义失效。
• Next.js静态资源路径问题：Next.js的静态资源需放在根目录的public文件夹下，你需要确保fonts文件夹位于public内（即路径为public/fonts/rubik.woff2），这样url(/fonts/rubik.woff2)才能正确访问到字体文件。
• Tailwind配置冗余：theme中的FontFace字段完全多余，且首字母大写不符合规范，应删除。
• 字体应用验证：需确保在组件中正确使用font-home类，否则字体不会被应用。

修正后的代码 #

globals.css #

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

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(/fonts/rubik.woff2) format("woff2");
}

tailwind.config.js #

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      home: ["Rubik", "cursive"],
    },
  },
  plugins: [],
};

额外验证步骤 #

1. 确认public/fonts/rubik.woff2文件存在，文件名大小写需与CSS中的定义一致。
2. 重启Next.js开发服务器，确保配置和文件变更生效。
3. 在页面组件中添加使用font-home类的元素，例如：

<div className="font-home">测试Rubik字体显示</div>

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