火狐浏览器自定义字体不显示需逐层排查：先用开发者工具检查@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 声明真正生效。
