Tailwind中Typekit字体配置失效的问题咨询

我来帮你捋捋这个问题，你遇到的情况大概率是几个配置细节没处理对，咱们一步步来修正：

1. 修正Tailwind配置中theme变量的引用错误 #

你在extend里直接用theme.fontFamily.sans是不行的——因为此时Tailwind还没完成主题的解析，theme变量在这里是未定义的状态。正确的做法是引入Tailwind的默认主题，然后引用它的字体配置：

首先在配置文件顶部引入默认主题：

const defaultTheme = require('tailwindcss/defaultTheme');

然后把fontFamily部分改成这样：

fontFamily: {
  display: ['"katarine-web"', ...defaultTheme.fontFamily.sans],
  body: ['"katarine-web"', ...defaultTheme.fontFamily.sans],
},

这样就能正确继承默认的sans字体 fallback 了。

2. 确认Typekit字体的准确名称 #

有时候我们容易记错Typekit的字体家族名，你可以打开浏览器开发者工具，查看引入的kcz3fka.css文件里的@font-face声明，找到font-family的准确值——比如可能是katarine而不是katarine-web，或者带有其他后缀。一定要保证配置里的名称和CSS里的完全一致。

3. 排查字体加载的优先级与可用性 #

• 先做个简单测试：在全局CSS里直接给body设置字体，看看是否生效：

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

  如果这个生效，说明字体本身没问题，只是Tailwind的配置没被正确应用；如果不生效，那大概率是字体没加载成功，检查一下Typekit的链接是否能正常访问，有没有控制台报错（比如token无效、网络问题）。
• 确保Typekit的CSS在Tailwind的样式之前加载，这样字体才能被Tailwind的类正确引用。

4. 清除缓存并重新构建 #

因为你用了JIT模式，有时候缓存会导致样式不更新。试试重启你的开发服务器，或者手动清除项目的构建缓存，再重新编译项目。

修正后的完整配置示例 #

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  purge: ['index.html', 'src/**/*.tsx'],
  mode: 'jit',
  theme: {
    extend: {
      container: {
        center: true,
      },
      fontFamily: {
        display: ['"katarine-web"', ...defaultTheme.fontFamily.sans],
        body: ['"katarine-web"', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
};

最后再给个小技巧：用浏览器开发者工具查看元素的计算样式，如果字体显示的是sans-serif而不是katarine-web，那要么是字体名称错了，要么是字体根本没加载成功——顺着这个方向排查准没错。

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