font-src 配置了 CDN 地址为什么字体还是加载失败?

程序猿旗施 阅读 30

我在项目里用了 Google Fonts,CSP 里也加了对应的域名,但浏览器控制台一直报「Refused to load font from…」的错误。明明其他资源比如 script-src 引第三方 CDN 都没问题,就字体不行。

我的 CSP 头是这样设置的:

Content-Security-Policy: default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;

是不是漏了什么?还是 Google Fonts 还有别的域名要加?

我来解答 赞 4 收藏
二维码
手机扫码查看
2 条解答
 ___树泽
font-src 这块确实容易踩坑。你现在的配置基本是对的,但 Google Fonts 有时会通过 gstatic.com 加载字体文件,所以你需要在 font-src 里加上这个域名。

建议把 CSP 改成这样:
Content-Security-Policy: default-src 'self'; font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com https://*.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;

注意几个点:
1. fonts.googleapis.com 主要提供 CSS 文件,字体文件实际是从 gstatic.com 或 gstatic.cn 下载
2. 使用通配符 *.gstatic.com 覆盖所有子域名情况
3. 确保服务端正确设置了 CSP 头,别漏了某个域名

我之前也遇到过类似问题,查了半天才发现是二级域名的问题,搞得很头疼。记得测试的时候清除下浏览器缓存,有时候旧的 CSP 策略还在生效。

要是还不行,打开浏览器开发者工具的 Network 面板看看具体请求地址,就能确认到底缺了哪个域名。
点赞
2026-03-29 17:03
亚会
亚会 Lv1
这个问题的关键是 CSP(内容安全策略)配置中的 font-src 指令可能没有完全覆盖所有需要的域名。Google Fonts 使用两个主要的域名:https://fonts.googleapis.comhttps://fonts.gstatic.com。你在 CSP 中已经添加了 https://fonts.gstatic.comfont-src,但是 https://fonts.googleapis.com 实际上提供的是 CSS 文件,这些 CSS 文件中引用的字体文件才真正从 https://fonts.gstatic.com 加载。

所以,你需要将 https://fonts.googleapis.com 添加到 style-src 中,而不是 font-src。这是因为 https://fonts.googleapis.com 提供的是样式表,而 https://fonts.gstatic.com 才是真正的字体文件源。

具体来说,你的 CSP 应该这样设置:

Content-Security-Policy: default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;


这里的关键是确保所有加载的资源都在 CSP 中得到授权。style-src 允许从 https://fonts.googleapis.com 加载样式表,而 font-src 允许从 https://fonts.gstatic.com 加载字体文件。

如果你仍然遇到问题,检查一下浏览器控制台是否有更多的错误信息,或者查看网络请求,确认是否还有其他的域名或者路径被阻止。有时候,浏览器的缓存也可能导致一些奇怪的问题,试着清除浏览器缓存再看看。

另外,如果你的项目不需要 'unsafe-inline',尽量避免使用它,因为它允许所有的内联样式,可能会带来安全风险。可以考虑使用非内联样式或者使用 'nonce-value' 或者 'hash-value' 来替代 'unsafe-inline'
点赞
2026-03-23 23:38