设置了font-src还是加载不了外部字体文件怎么办？

这个问题很可能是CSP的font-src规则没覆盖到实际请求的域名，或者响应头配置有遗漏。

你虽然加了font-src 'self' https://fonts.example.com，但得先看控制台报错里被拦截的字体地址具体是哪个域名。比如你的CSS里src写的是 /fonts/custom.woff2，这种相对路径最终加载时会拼接当前页面的host，也就是说字体其实是从你自己的站点域名下请求的，而不是fonts.example.com。这时候就得确保你自己的域名也在font-src里允许了。

通用的做法是把所有可能的字体来源都列全。如果你的站点是https://example.com，那CSP应该写成：

font-src 'self' https://example.com https://fonts.example.com;

另外注意协议也要匹配，如果页面是https但CSP只写了http，也会被阻止。还有一种情况是用了CDN或代理，实际请求走了另一个子域，比如cdn.example.com，那也得加上。

最后确认下Content-Security-Policy响应头有没有正确设置在返回字体文件的响应里。有时候主页面加了CSP，但静态资源是单独服务返回的，忘了带上CSP头，浏览器还是会拦截。

你可以先把font-src临时设成*确认是不是CSP的问题，再逐步收紧来源，一个个加白名单试试。

问题应该出在你的字体路径和CSP配置不匹配上。虽然你在CSP里写了https://fonts.example.com，但你的CSS里的字体路径是/fonts/custom.woff2，这是个相对路径，实际上会从你自己的域名加载，而不是fonts.example.com。

解决办法很简单，把CSS里的字体路径改成完整的绝对路径试试：

@font-face {

  font-family: 'CustomFont';

  src: url('https://fonts.example.com/fonts/custom.woff2') format('woff2');

}

body {

  font-family: 'CustomFont', sans-serif;

}

这样就明确告诉浏览器从fonts.example.com加载字体，跟CSP里的配置一致了。如果还有问题，检查下fonts.example.com的CORS设置，确保允许跨域访问。

这种问题真是让人头大，明明配了CSP，结果是个路径的小疏忽。调试这种事就是这么磨人，哈哈。