如何在Tailwind CSS项目中添加自定义WOFF、WOFF2格式字体？

修复步骤 #

1. 修正tailwind.config.js的字体配置位置 #

你当前将自定义字体键直接定义在了theme.extend根节点，正确需要嵌套在fontFamily配置项中，修正后配置如下：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        mkder: ['Caviar Dreams', 'sans-serif'],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

额外添加的sans-serif是兜底字体，避免自定义字体加载失败时无备用字体。

2. 调整字体文件引用路径 #

绝大多数前端构建工具会将public目录下的资源直接映射到站点根目录，你当前路径中包含/public会导致实际请求路径错误，修正styles.css中的src路径：

@layer base{
    @font-face {
        font-family: 'Caviar Dreams';
        font-weight: bold;
        font-style: normal;
        src: url("/fonts/CaviarDreams-Bold.woff2") format("woff2"),
        url("/fonts/CaviarDreams-Bold.woff") format("woff");
    }
}

如果你的项目是相对路径部署，也可以使用相对于styles.css文件的相对路径引入字体。

3. 匹配字重规则 #

你当前仅声明了font-weight: bold的字体规则，测试用的p标签默认是普通字重，无法命中你定义的字体，两种解决方案任选其一：

• 给测试标签添加font-bold类，匹配粗体规则：

<p class="font-mkder font-bold bg-green-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, nisi incidunt? A sunt fugiat repellendus est molestiae, adipisci similique? Nam.</p>

• 补充普通字重的@font-face声明，对应Caviar Dreams常规字重的字体文件。

4. 基础校验 #

确认public/fonts目录下的字体文件名称、大小写和你引用的路径完全一致，大小写差异会导致Linux部署环境下加载失败。

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