Tailwind自定义Poppins字体后font-weight不生效问题求助

开发者阿泽

2026-8-14

解决Tailwind配置Poppins字体后字重工具类失效问题

问题出在你引入Poppins字体时，只加载了默认字重（一般是400），但Tailwind的字重工具类（比如font-bold对应700）需要字体文件包含对应字重版本。当你配置Poppins为sans字体族后，工具类会调用Poppins的对应字重，但该字重的字体文件没被加载，所以看不到效果；移除配置后用默认字体，默认字体已经包含了所需字重，因此恢复正常。

解决步骤：

修改Google Fonts引入链接，指定需要的字重
把index.html里的字体链接改成包含你需要的字重，比如常用的400、500、700：
```
<link href="https://fonts.googleapis.com/css?family=Poppins:wght@400;500;700" rel="stylesheet">
```
格式是在字体名后加:wght@，后面用分号分隔需要的字重数值，你用到哪些Tailwind字重工具类，就加对应的数值。

确认Tailwind配置正确
确保你的tailwind.config.js是在extend里扩展字体族，而不是直接覆盖：

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  // 其他配置内容
}