如何修复火狐浏览器无法正常渲染自定义字体@font-face的问题？

火狐浏览器自定义字体不显示需逐层排查：先用开发者工具检查@font-face请求是否404或被取消；确认format()参数严格为'woff2'或'truetype'；删除src末尾悬空逗号；配置CORS头或改用Base64内联；禁用NoScript等扩展干扰；启用WebRender并关闭“允许页面选择自己的字体”。

火狐浏览器加载网页时自定义字体不显示、文字变成方块或回退到默认字体，说明 @font-face 规则被静默忽略或加载失败，必须逐层排查字体声明、路径、格式、跨域和扩展干扰等关键环节。

检查 @font-face 声明语法与格式标识

Firefox 对 format() 参数极为敏感，写错一个字母就会整条 src 规则失效，且不报错。

第一步：打开开发者工具（Ctrl+Shift+I）→ 切换到“网络”标签 → 过滤“字体”或刷新页面后查找 .woff2/.ttf 请求，确认是否 404 或状态为“已取消”。

第二步：检查 CSS 中 @font-face 的 format() 值是否严格匹配规范——.woff2 必须写 【'woff2'】，.ttf 必须写 【'truetype'】，不可用 'ttf' 或 'TrueType' 等变体。

第三步：删除 src 属性末尾的悬空逗号，例如 url('font.ttf') format('truetype'), → 改为 url('font.ttf') format('truetype')；Safari 和旧版 Firefox 会因此直接丢弃整个 src 声明。

解决跨域字体加载被拒问题

Firefox 默认阻止跨域加载字体文件，即使字体文件在同域子路径下，也可能因协议、端口或重定向触发 CORS 拦截。

方法一：服务端配置 Access-Control-Allow-Origin 头（推荐）

Apache 用户在 .htaccess 中添加：
＜FilesMatch ".(eot|ttf|otf|woff|woff2)"＞
　　Header set Access-Control-Allow-Origin "*"
＜/FilesMatch＞

Nginx 用户在 server 块中添加：
location ~* .(eot|ttf|otf|woff|woff2)$ {
　　add_header Access-Control-Allow-Origin '*';
}

方法二：本地开发无服务端权限时，改用 Base64 内联字体

将 .ttf 文件上传至 fontsquirrel.com 的 @font-face Generator，选择 Expert 模式 → 勾选 “Base64 encode” → 下载生成包，直接引入其 CSS 文件；该方式把字体二进制转为字符串嵌入 CSS，彻底绕过跨域限制。

排除浏览器扩展干扰

NoScript、uBlock Origin 等安全类扩展可能主动屏蔽 @font-face 加载规则，尤其当字体域名被判定为第三方资源时。

在地址栏输入 about:addons → 点击“扩展” → 临时禁用所有扩展 → 刷新网页验证字体是否恢复显示。

若恢复，逐个启用扩展定位问题源；对 NoScript，请进入其选项 → “嵌入”标签页 → 取消勾选 【禁止 @font-face】 选项。

强制启用 WebRender 并重置字体渲染链

某些显卡驱动与 Firefox 默认渲染路径冲突，导致字体解析成功但光栅化阶段丢弃字形轮廓。

① 在地址栏输入 about:config → 接受风险继续 → 搜索 gfx.webrender.all → 双击设为 true；

② 搜索 gfx.webrender.enabled → 确保值为 true；

③ 搜索 gfx.webrender.force-enabled → 若不存在，右键新建布尔值，名称填入该字段，值设为 true；

④ 关闭所有窗口，重启 Firefox；

⑤ 进入 about:preferences#general → “语言和外观” → “字体和颜色” → 点击“设置” → 取消勾选“允许页面选择自己的字体”，再点击“确认”；这一步可切断网页 font-family 覆盖，让 @font-face 声明真正生效。