使用@font-face加载自定义字体仅Chrome正常，Firefox/Safari失效求因

我尝试使用@font-face在网站加载自定义字体，但只有Chrome能正确渲染，Firefox和Safari会回退到默认无衬线字体Arial。已确认字体文件存在且在Network面板中返回200状态码。

我的CSS代码如下：

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/mycustomfont.woff2') format('woff2'),
       url('/fonts/mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

已尝试的排查步骤：

• 确认字体文件在三款浏览器中均加载成功（返回200 OK）；
• 添加font-display: swap避免FOIT（不可见文本闪烁）；
• 检查字体服务器的CORS头（返回Access-Control-Allow-Origin: *）；
• 清除缓存并在无痕窗口测试。

预期效果：三款浏览器均渲染MyCustomFont字体；实际效果：仅Chrome正常，Firefox和Safari显示Arial。所有浏览器控制台均无报错，请问这种跨浏览器不一致的原因是什么？

可能的原因及修复方案 #

1. 字体文件本身的兼容性问题 #

Chrome对字体文件的容错性更高，部分存在编码或元数据损坏的字体，Firefox和Safari会直接拒绝渲染。可以：

• 用Web字体生成工具重新导出标准的WOFF/WOFF2格式，确保字体元数据完整；
• 检查字体是否包含normal字重的映射，部分字体导出时可能丢失默认字重数据。

2. format声明的严格校验 #

部分浏览器对format值的拼写或格式敏感，尝试：

• 移除format声明，让浏览器自动识别字体格式：

src: url('/fonts/mycustomfont.woff2'),
     url('/fonts/mycustomfont.woff');

• 确认format值拼写正确，避免出现woff-2这类错误写法。

3. 字体内部名称与font-family不匹配 #

Firefox和Safari对字体内部的PostScript名称/全名匹配要求更严格：

• 用字体查看工具（如macOS字体册、Windows字体查看器）查看字体的内部名称，确保@font-face中font-family的值与内部名称完全一致（注意大小写、空格）；
• 若字体内部名称是MyCustomFont-Regular，则需同步调整font-family的取值。

4. font-display的版本兼容问题 #

旧版本的Firefox（<58）和Safari（<11.4）不支持font-display: swap，可能导致字体加载逻辑异常：

• 暂时移除font-display: swap测试渲染效果；
• 若需保留该属性，确保目标浏览器版本符合兼容要求。

5. CSS样式优先级冲突 #

可能存在其他CSS规则覆盖了body的font-family设置，Chrome与其他浏览器的优先级计算略有差异：

• 用浏览器开发者工具检查body元素的计算样式，确认font-family是否被其他规则覆盖；
• 临时添加!important测试（仅用于排查，不推荐长期使用）：

body {
  font-family: 'MyCustomFont', Arial, sans-serif !important;
}

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