时间戳

首页 > 解决方案 > 如何修复自定义字体的 CORS 错误？

css - 如何修复自定义字体的 CORS 错误？

问题描述

我上传的自定义字体未在 Firefox 或 Chrome 上显示，但它在 Safari 和移动设备上运行。我收到一个 CORS 错误“CORS 政策：没有 'Access-Control-Allow-Origin'”。

可能是样式表链接吗？

（链接 rel="stylesheet" type="text/css" href="http://go.pardot.com/l/752313/2019-06-15/pfv/752313/4021/1711_JKVABE.css"）

这是该页面的链接：http: //go.pardot.com/l/752313/2019-06-07/g4s

    @font-face {
        font-family: 'Canela Web';
        src: url('http://go.pardot.com/l/752313/2019-06-15/pfs/752313/4019/Canela_Regular_Web.eot');
        src: url('http://go.pardot.com/l/752313/2019-06-15/pfs/752313/4019/Canela_Regular_Web.eot?#iefix') format('embedded-opentype'),
             url('http://go.pardot.com/l/752313/2019-06-15/pfn/752313/4015/Canela_Regular_Web.woff2') format('woff2'),
             url('http://go.pardot.com/l/752313/2019-06-15/pfq/752313/4017/Canela_Regular_Web.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        }

    .Canela-Regular-Web {
        font-family: 'Canela Web';
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        }

标签： cssfont-facecustom-font

解决方案

我有一个类似的问题。要修复此特定错误，CSP 应包括以下内容：

font-src 'self' data:;

因此，在 head 标签中应该设置这个元：

<meta http-equiv="Content-Security-Policy" content="connect-src * 'unsafe-inline'; font-src 'self' data:;">

推荐阅读