Mozilla Firefox无法加载Google字体问题求助

1. 修正Google Fonts加载标签的Crossorigin属性 #

Firefox对跨域资源的CORS要求更严格，你的原始加载代码中fonts.googleapis.com的相关标签缺少crossorigin属性，补充后即可匹配跨域规则：

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet" crossorigin>

2. 检查Firefox跟踪保护设置 #

Firefox的增强跟踪保护可能会拦截Google Fonts这类第三方资源：

• 点击地址栏的盾牌图标，选择「禁用跟踪保护」后重新加载页面测试
• 若测试有效，可将你的站点加入跟踪保护例外列表，或把全局跟踪保护等级调整为「标准」

3. 确保自行托管字体的@font-face配置正确 #

如果选择自行托管字体，需核对以下配置细节：

• 优先使用WOFF2格式（Firefox完全支持），确保字体文件路径正确
• @font-face声明需包含必要属性，示例：

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/cairo-v22-latin-regular.woff2') format('woff2');
  font-display: swap;
}

• 服务器需正确返回WOFF2的MIME类型（font/woff2），否则Firefox可能拒绝加载字体

4. 清除Firefox缓存并强制刷新 #

缓存损坏的资源可能导致加载失败：

• 使用快捷键Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面
• 或进入「设置 → 隐私与安全 → 清除数据」，选择「缓存的Web内容」清除后重启浏览器

5. 排查网络请求日志 #

打开Firefox开发者工具（F12）→ 「网络」面板，筛选「样式表」和「字体」：

• 查看fonts.googleapis.com/css2的请求状态，若为403/404需检查URL是否正确
• 查看fonts.gstatic.com字体文件的请求状态，确认是否存在CORS错误或拦截

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