Tailwind配置@font-face引入本地自定义字体无法正常加载求助

错误1：@font-face属性名语法错误 #

你写的font family: Trade Gothic LT;缺少连字符，正确属性名为font-family。

错误2：字体文件路径配置错误 #

public目录下的资源在项目构建后会直接暴露在站点根路径下，不需要在路径中引入public字段，你写的../public/assets/font/TradeGothicLT.woff属于无效路径，会找不到字体文件。

错误3：@font-face声明位置不规范 #

@font-face声明需要放在@tailwind base之前，否则可能被Tailwind的基础样式覆盖导致不生效。

可选优化：补充字体属性及兜底字体 #

建议补充font-weight、font-style属性明确字体样式，同时在Tailwind配置中添加系统兜底字体，避免自定义字体加载失败时样式异常。

修正后的style.css代码 #

@font-face {
  font-family: "Trade Gothic LT";
  src: url("/assets/font/TradeGothicLT.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

修正后的tailwind.config.js代码 #

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'body': ["Trade Gothic LT", "sans-serif"]
      },
    },
  },
};

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