Javascript 条纹自定义排版字体

我的Web服务器上有一个cloud.typography字体。当我尝试使用

stripe.elements（）

将其链接到stripe时，我的字体不会显示，默认为Helvetica。我也没有收到任何javascript错误

以下是我的javascript代码：

var elements = stripe.elements({
    fonts: [
        {
            cssSrc: 'localhost:8080/static/fonts/######/#################.css',
        },
    ],
});
var baseStyle = {
    fontFamily: 'Gotham Narrow A, Gotham Narrow B, sans-serif',
    fontSize: '16px',
    lineHeight: '1.5',
    fontWeight: '300',
    color: '#2d3138',
    '::placeholder': {
        color: '#8f95a3'
    }
};
var invalidStyle = {
    fontFamily: 'Gotham Narrow A',
    fontSize: '16px',
    lineHeight: '1.5',
    fontWeight: '300',
    color: '#e70000'
};
var style = {
    base: baseStyle,
    invalid: invalidStyle
};
var styles = {style: style};
var card = elements.create('cardNumber', styles);

如果我尝试使用css链接直接链接到排版，我会收到以下错误：

Failed to load https://cloud.typography.com/#######/#######/css/fonts.css: 
Redirect from 'https://cloud.typography.com/#######/#######/css/fonts.css' 
to 'https://myhostedwebsite.com/fonts/######/#################.css' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. Origin 'http://localhost:8080' 
is therefore not allowed access.

我还尝试将我的字体作为字体族对象导入

var elements = stripe.elements({
    fonts: [
        {
            family: 'Gotham Narrow A',
            src: 'url(https://myhostedwebsite.com/fonts/######/#################.eot)',
            style: 'normal',
            weight: '300',
        },
    ],
});

请帮助。

编辑

@Michael发现他必须将stripe.com添加到cloud.Printography的项目仪表板上启用的域列表中。现在条纹元素使用cloud.typography字体。当chrome使用--disable web security标志运行时，这一点就起作用了。但是，当使用chrome扩展时，这些结果不起作用

---

你的错误是：

Failed to load https://cloud.typography.com/#######/#######/css/fonts.css: 
Redirect from 'https://cloud.typography.com/#######/#######/css/fonts.css' 
to 'https://myhostedwebsite.com/fonts/######/#################.css' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. Origin 'http://localhost:8080' 
is therefore not allowed access.

Chrome不支持本地主机的CORS请求

您可以使用Chrome扩展来解决这个问题。扩展将为CORS添加必要的HTTP头

或

---

使用--disable web security标志启动chrome，下面是一个示例，演示如何从第三方页面（从您不必控制的另一个域）加载字体

您还必须在CSS中导入webfont

---

@导入url（'https://fonts.googleapis.com/css?family=Indie+花“）
您使用的是哪种浏览器？最新版本的Google chrome我运行带有--disable web security标志的Google chrome并测试了我的网站。但是，我的字体仍然没有显示出来。控制台中的错误是：
加载资源失败：服务器响应状态为403（禁止）
。您尝试了chrome扩展吗？我也尝试了chrome扩展。我收到此错误：
当请求的凭据模式为“include”时，响应中“Access Control Allow Origin”头的值不能是通配符“*”。起源'https://m.stripe.network因此，不允许访问。XMLHttpRequest启动的请求的凭据模式由withCredentials属性控制。
Ohhh，好的，我让它工作了。这就是我所做的。我不得不将stripe.com添加到我在cloud.typography的项目仪表板上启用的域列表中。现在我的条纹元素正在使用我的cloud.typography字体。当我使用
--disable web security
标志运行chrome时，这一点就起作用了。然而，当使用chrome扩展时，我无法得到这些结果。@Michael我只是在研究这个问题。我将为社区相应地更新答案。此答案不适用于我的问题，因为cloud.typography是基于订阅的webfont。我不能简单地使用url参数访问字体。cloud.typography用于启用我购买的字体的过程如下：cloud.typography为我的webfonts生成十六进制代码，并创建
.css
和
.eot
文件。然后我下载这些字体并将它们移动到我的网站目录中。然后，当我发布我的网站时，字体安装由cloud.typography确认。一旦字体被确认，它们就会被激活。
.css
文件包括所有的
@font-face{}
定义。