Stripe custom typography font

Question

I have a cloud.typography font hosted on my webserver. When I try to link it to stripe using stripe.elements() my fonts do not show up and it defaults to Helvetica. I also do not receive any javascript error.

Here is my javascript code:

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);

If I try and link directly to typography using the css link it gives me, I receive the following error:

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.

I have also tried importing my font as a font-family object.

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

Please help.

Answer 1

EDIT

@Michael found out that he had to add stripe.com to in list of enabled domains on cloud.typography's project dashboard. Now the stripe elements are using the cloud.typography font. This is working when chrome was run with the --disable-web-security flag. These results are not working when using the chrome extension however.

---

Your error says:

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 doesn't support localhost for CORS request.

You can use the Allow-Control-Allow-Origin: * Chrome Extension to go around this issue. The extension will add the necessary HTTP Headers for CORS.

OR

Start chrome with the --disable-web-security flag