部署至Render后Tailwind CSS自定义字体失效问题求助

问题背景 #

本地运行时，以下代码可正常工作并达到预期效果，但部署至Render.com后无法正常运行：

@font-face {
  font-family: "Kodchasan";
  src: url("/src/assets/fonts/Kodchasan-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@import "tailwindcss";

@theme {
  --font-kodchasan: Kodchasan, "sans-serif";
}

改用下方代码可正常部署，但样式出现错乱：

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

@font-face {
  font-family: "Kodchasan";
  src: url("/fonts/Kodchasan-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Kodchasan", sans-serif;
}

核心原因 #

1. 资源路径不匹配：本地开发时/src/assets/fonts/的路径能被构建工具解析，但生产环境下，src目录不会被打包到服务器根目录，导致字体文件404，第一种代码因此失效。
2. 样式加载顺序冲突：第二种代码把@font-face放在Tailwind指令之后，导致Tailwind基础样式的字体优先级高于自定义字体，或者全局body字体被Tailwind默认样式覆盖，引发样式错乱。

修复方案 #

步骤1：调整字体文件的构建路径 #

确保构建工具（如Vite、Webpack）将字体文件打包到生产环境可访问的目录：

• 将字体文件移动到项目的public/fonts/目录下，这样部署后可通过/fonts/Kodchasan-Light.ttf访问。
• 若使用Vite，可在vite.config.js中确保字体文件被正确识别：

  export default {
    assetsInclude: ['**/*.ttf']
  }
  

步骤2：正确编写CSS代码（顺序+变量配置） #

将@font-face放在Tailwind指令之前，确保字体先被定义，再结合Tailwind的主题变量统一管理：

@font-face {
  font-family: "Kodchasan";
  src: url("/fonts/Kodchasan-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 优化字体加载时的页面闪烁问题 */
}

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

@theme {
  --font-kodchasan: Kodchasan, sans-serif;
}

步骤3：在Tailwind配置文件中注册字体（可选但更可靠） #

修改tailwind.config.js，将自定义字体加入主题扩展，方便通过类名直接使用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        kodchasan: ["Kodchasan", "sans-serif"],
      },
    },
  },
  plugins: [],
};

之后就可以在HTML元素上使用font-kodchasan类来应用字体。

验证步骤 #

部署后打开浏览器控制台的「网络」标签，检查字体文件是否成功加载（无404错误）；同时查看元素的字体样式，确认自定义字体已生效。

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