WOFF2 字体加载失败怎么办？

长孙英杰提问于 2026-03-20 04:59:18 阅读 18

优化

我在项目里用了 WOFF2 格式的自定义字体，本地开发没问题，但部署到线上后部分浏览器根本不加载，控制台报 404。我确认文件路径是对的，而且服务器也配置了 MIME 类型。

是不是还要加什么特殊的响应头？或者我的 @font-face 写法有问题？现在用的是：

@font-face {
  font-family: 'MyFont';
  src: url('./fonts/myfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

我来解答赞 4 收藏

反馈

1 条解答

UX薪羽 Lv1

这个问题很常见，十有八九是服务器响应头的问题。

先说排查方法：用浏览器的 Network 面板查看字体请求的 Status Code 和 Response Headers。如果返回的是 404 但文件确实存在，那就是服务器没有正确处理这个文件类型。

重点来了——你需要检查这几个响应头：

1. Content-Type
确保服务器返回的是 application/font-woff2 或 font/woff2，有些老版本的服务器可能不识别 woff2。

2. Access-Control-Allow-Origin
这个最容易被忽略！跨域字体加载必须要有这个头，否则浏览器会直接拒绝。Nginx 的话加：

location ~* .woff2$ {

    add_header Access-Control-Allow-Origin *;

}

Apache 在 .htaccess 里加：

<FilesMatch ".woff2$">

    Header set Access-Control-Allow-Origin "*"

</FilesMatch>

3. 确认文件真的被正确返回
有时候 MIME 类型配置了但顺序不对，服务器可能返回了错误的内容类型。用 curl 测一下：

curl -I https://你的域名/fonts/myfont.woff2

看看返回的 Content-Type 是什么。

另外检查一下页面和字体是否同源，如果不是（比如页面 https 字体 http），浏览器会直接拦截，这种情况现在很常见。

你的 @font-face 写法没问题的，放心。

2026-03-20 06:00