我来帮你排查这个自定义字体加载的坑——这种情况大概率是路径配置错误、@font-face规则不规范或者字体格式兼容性的问题，咱们一步步来解决：

1. 确保@font-face的路径和规则完全正确 #

首先检查你的style.css里的@font-face配置，路径必须相对于style.css的位置。举个例子，如果你的项目结构是这样：

项目根目录/
├─ fonts/
│  ├─ expansiva-regular.woff2
│  └─ expansiva-regular.woff
├─ style.css
└─ index.hbs

那@font-face的路径应该写成./fonts/xxx，完整代码如下：

@font-face {
  font-family: 'Expansiva'; /* 这个名字要和后面调用时完全一致 */
  src: url('./fonts/expansiva-regular.woff2') format('woff2'),
       url('./fonts/expansiva-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 避免页面加载时的字体闪烁 */
}

⚠️ 注意：文件名和路径的大小写要完全匹配（尤其是部署到Linux服务器时，大小写敏感），不要写错后缀。

2. 确认Web字体格式的兼容性 #

虽然你说转了Web字体，但可能转换的格式不全或者文件损坏。建议至少生成woff2（现代浏览器优先支持，体积更小）和woff（兼容旧版浏览器）两种格式，尽量避免只提供ttf/otf格式——有些浏览器对本地ttf的加载会有安全限制。

转换时要保证工具的可靠性，转换后可以打开字体文件确认是否正常（比如用系统字体预览工具查看）。

3. 检查字体调用的CSS规则 #

在使用字体时，一定要把自定义字体放在系统字体的前面，并且字体名要和@font-face里的font-family完全一致：

body {
  font-family: 'Expansiva', Arial, sans-serif;
}

如果你的字体有粗体、斜体版本，还要对应添加不同的@font-face规则（指定font-weight: bold或font-style: italic）。

4. 用浏览器开发者工具排查请求问题 #

打开浏览器的开发者工具（按F12），切换到Network标签，刷新页面，查看字体文件的请求状态：

• 如果显示404：说明路径错误，重新调整@font-face里的url路径；
• 如果显示200但字体没生效：可能是字体文件损坏，或者服务器的MIME类型配置不对（需要确保woff2的MIME是font/woff2，woff是font/woff）；
• 可以勾选「Disable cache」后再刷新，避免旧的缓存配置干扰。

5. 本地测试时避免直接打开静态文件 #

如果是本地直接双击打开index.hbs生成的HTML文件，有些浏览器会限制本地文件的跨路径请求（比如Chrome的同源策略限制）。这时候建议用本地HTTP服务器来测试，比如用Node.js的npx serve命令启动一个简单的服务器，然后通过http://localhost:3000访问项目。

如果以上步骤都试过还是不行，可以检查项目是否有构建工具（比如Webpack、Gulp），这类工具可能需要额外配置来处理字体文件的打包路径，确保字体文件被正确拷贝到输出目录。

内容的提问来源于stack exchange，提问作者Ron Allen Smith