TailwindCSS中自定义字体（文件）无法生效问题求助

1. 修正Tailwind类名错误 #

你在Tailwind配置中定义的字体族名称是robotoMono，但HTML中使用的类名是font-roboto，两者不匹配导致自定义字体从未被应用。将HTML中的类名改为font-robotoMono：

<body class="font-robotoMono">
    <div id="mainContainer">
        <div id="title"><h1>Password Generator</h1></div>

2. 验证字体文件路径有效性 #

• 确认字体文件实际后缀：你标注的路径是/resources/fonts/robotoMono，但@font-face中写的是robotoMono.ttf，需确保文件实际后缀为.ttf。
• 直接在浏览器地址栏输入字体文件的绝对URL（例如http://localhost:5500/resources/fonts/robotoMono.ttf），如果无法下载文件，说明路径错误，调整@font-face中的url()路径：
  • 若CSS文件位于项目根目录的css文件夹下，路径应为../resources/fonts/robotoMono.ttf；
  • 若CSS文件和resources文件夹同级，路径改为./resources/fonts/robotoMono.ttf；
  • 也可尝试使用绝对路径/resources/fonts/robotoMono.ttf（以项目根目录为起点）。

3. 确保Tailwind扫描到使用字体的文件 #

你的tailwind.config.js中content配置为./{html, js}，如果HTML/JS文件不在项目根目录（例如在src文件夹下），需调整扫描路径，避免Tailwind未识别到字体类名而将其剔除：

module.exports = {
  content: [`./**/*.{html, js}`], // 扫描所有子目录下的html和js文件
  theme: {
    extend: {
      fontFamily: {
        robotoMono: [`robotoMono`, `sans-serif`],
      },
    },
  },
  plugins: [],
};

4. 完善@font-face配置增强兼容性 #

补充字体格式声明和显示策略，同时确保字体族名称完全一致：

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

@font-face {
  font-family: "robotoMono";
  src: url("../resources/fonts/robotoMono.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 避免页面加载时出现无样式文本闪烁 */
}

5. 排查Live Server与缓存问题 #

• 强制刷新浏览器（Ctrl+Shift+R）清除旧缓存；
• 确保Tailwind的实时编译命令在后台运行（例如npx tailwindcss -i ./input.css -o ./output.css --watch），否则修改配置后CSS不会实时更新；
• 重启Live Server，避免热重载异常导致的临时字体切换后恢复问题。

6. 直接测试字体加载能力 #

跳过Tailwind类，直接在CSS中为元素设置字体，验证字体文件是否能正常加载：

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

@font-face {
  font-family: "robotoMono";
  src: url("../resources/fonts/robotoMono.ttf") format("truetype");
}

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

如果此时字体生效，说明问题出在Tailwind的配置或类名上；若仍不生效，需检查字体文件是否损坏，或尝试更换其他格式的字体文件（如WOFF2）。

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