我正在我的站点上通过 @font-face 加载自定义字体，但字体在Chrome中渲染正常，在Firefox和 Safari中却回退到默认的无衬线字体。已经在网络选项卡中验证字体文件存在并返回200状态。

以下是我的CSS：

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;
}

我尝试过的办法：

1. 确认字体文件加载（在三种浏览器中均返回200 OK）。
2. 添加 font-display: swap 以避免FOIT。
3. 检查字体服务器的CORS头信息（返回 Access-Control-Allow-Origin: *）。
4. 清除缓存并在隐身窗口中测试。

期望： 在所有浏览器中字体都显示为MyCustomFont。 实际： 只有Chrome能正确渲染；Firefox和 Safari显示Arial。

在任何浏览器中都没有出现控制台错误。可能是什么原因导致这跨浏览器的不一致？

解决方案

正如我之前也多次遇到相同的问题，原因很可能是服务器或应用缺少MIME类型定义。如果你使用的是共享主机，请在控制面板中添加mimetypes；或者如果你能直接访问IIS（或web.config）或Apache（.htaccess）设置，请在IIS设置中为以下两种类型定义：

font/woff2 for .woff2

以及

font/woff for .woff

根据评论中的反馈，已移除此部分。

如果你创建或修改了自定义字体，请确保使用了正确的字体名称。双击.woff、.woff2，或原始的.ttf/.otf，操作系统的字体查看器就会显示名称。