条形定制字体

Question

我的font服务器上有一个cloud.typography字体。当我尝试使用stripe.elements()将它链接到条带时，我的字体不会出现，它默认为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',
        },
    ],
});

请帮帮忙。

Answer 1

编辑

@Michael发现他必须将stripe.com添加到云中的启用域列表中。现在，条形元素正在使用cloud.typography字体。这是工作时，铬是运行-禁用-网络安全标志。然而，当使用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报头。

或

使用禁用web安全标志启动chrome

Answer 2

下面是一个示例，演示如何从第三方页面(来自另一个您不一定控制的域)加载字体。

https://jsfiddle.net/5yz4z2yn/104/

您还必须导入CSS中的the字体。

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');