设置了font-src为什么字体还是被阻止加载？

Zz春荣提问于 2026-02-04 21:59:23 阅读 32

安全

我在项目里用Google字体时遇到了CSP报错，明明在HTTP头里写了font-src fonts.gstatic.com，但控制台还是提示“Blocked loading font”…

这是我的配置示例：


<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src fonts.gstatic.com">

页面里这样引入字体：


<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="external nofollow"  rel="stylesheet">

报错显示需要允许fonts.googleapis.com域名，但font-src里明明只写了fonts.gstatic.com啊？两者的域名关系搞混了吗？

font-src

我来解答赞 9 收藏

反馈

2 条解答

Top丶锦锦 Lv1

你这个问题是典型的CSP配置误区。font-src控制的是字体文件的加载源，但Google Fonts的CSS是通过引入的，这属于样式表请求，走的是style-src的规则。浏览器控制台报错其实已经提示得很清楚了：虽然字体文件是从fonts.gstatic.com加载的，但你那个标签本身是从fonts.googleapis.com加载CSS，而这个CSS加载被style-src拦下了。

代码放这了：

注意要根据你实际的CSS引入源来配置，如果你用了多个字体服务，可能还要加上其他域名。另外fonts.googleapis.com和fonts.gstatic.com这两个域名其实是Google的CDN搭配使用，一个负责CSS解析，一个负责字体文件分发，理解它们的分工后配置就不会错了。

2026-02-06 19:02

设计师雅涵 Lv1

你这个 CSP 配置确实有问题。

font-src 只写了 fonts.gstatic.com，但你引入的字体链接是 https://fonts.googleapis.com/...，这两个域名不一样，所以字体被拦了。

fonts.googleapis.com 是 Google Fonts 的样式表地址，fonts.gstatic.com 是字体文件的真实地址。

浏览器加载流程是这样的：

1. 先加载 fonts.googleapis.com 上的 CSS 文件
2. 该 CSS 文件里引用了 fonts.gstatic.com 上的真实字体文件

所以 CSP 应该这样配：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src fonts.gstatic.com; style-src 'self' fonts.googleapis.com">

重点：

- font-src fonts.gstatic.com：允许加载字体文件
- style-src 'self' fonts.googleapis.com：允许加载 Google Fonts 的 CSS 文件

字体能正常加载的关键是这两个域名都要放行。

代码给你贴好了，直接用这个 CSP 头应该就没问题了。

2026-02-04 22:01