字体加载失败主因是路径错误、格式不支持或MIME类型配置不当；需查404/CORS错误、验证相对路径、提供woff2/woff/ttf多格式回退，并确保服务器返回正确Content-Type及CORS头。
字体文件加载失败，通常是因为 @font-face 中声明的路径不对、格式不被支持，或服务器未正确配置 MIME 类型。先确认浏览器控制台是否报 404（路径错误）或 CORS（跨域）错误，再逐项排查。
检查 font-face 的 src 路径是否正确
路径是相对 css 文件位置计算的，不是 html 页面位置。比如 CSS 在 /css/style.css，字体在 /fonts/inter.woff2，那么 src 应写：
@font-face {
src: url(“../fonts/inter.woff2”);
}
- 用浏览器开发者工具的 Network 标签页查看字体请求是否返回 404；
- 右键复制字体链接，在新标签页打开，确认能否直接下载；
- 避免使用绝对路径如
/fonts/xxx.woff2，除非确定站点根目录部署结构一致。
确认字体格式是否被浏览器支持
不同浏览器支持的字体格式有差异。单靠一种格式（如只用 .ttf）容易失败。推荐按优先级提供多格式回退：
@font-face {
font-family: “MyFont”;
src: url(“font.woff2”) format(“woff2”),
url(“font.woff”) format(“woff”),
url(“font.ttf”) format(“truetype”);
}
- 现代项目优先用
woff2（压缩率高、兼容性好，chrome/firefox/safari/edge 均支持）； - IE11 只支持
eot和woff，如需兼容可补充； - 避免使用已淘汰格式如
svg字体（仅旧版 ios Safari 支持）。
检查服务器是否返回正确的 Content-Type
字体文件需由服务器以对应 MIME 类型响应，否则部分浏览器（尤其 Chrome）会拒绝加载：
-
.woff2→font/woff2 -
.woff→font/woff -
.ttf→font/ttf或application/font-sfnt - 本地开发用 VS Code Live Server 默认支持；node.js/express 需手动设置；nginx/apache 需配置 mime.types 或 AddType 指令。
留意 CORS 限制（尤其字体跨域加载时）
从其他域名或子域名加载字体，若服务端未设置 access-Control-Allow-Origin，Chrome/Firefox 会静默失败。
- 本地直接双击打开 HTML 会触发 file:// 协议限制，务必用本地服务器预览；
- CDN 加载字体时，在字体服务端配置允许你的域名跨域访问；
- 开发中可用
curl -I font-url查看响应头是否含Access-Control-Allow-Origin: *或指定域名。