Custom font src with Stripe

Question

Using this as reference https://stripe.com/docs/elements/reference#stripe-elements

I'm trying create a custom font src to pass to my stripe elements:

var elements = stripe.elements(
    {
        font: {
            family:'Effra',
            src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')"
        }
    }
);

var style = {
    base: {
        fontFamily: 'Effra'  
    }
}

But the font is not displaying as planned..

Any help would be appreciated:

Answer 1

Thanks guys for the help. I got a help on stripe's IRC. It might've been the missing commas, and also switched to ttf. At any rate hope this can help someone:

var elements = stripe.elements({
    fonts: [
        {
            family: 'Effra',

            src: 'local("Effra"), local("effra"), url(https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.ttf) format("truetype")',
            unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215',
        },
    ]
});


<style>
@font-face {
font-family: 'Effra';
font-weight: 400;
src: local("Effra"), local("effra"), url(https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.ttf) format("truetype");
unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
} 
</style> 

Answer 2

stripe.elements takes an options object.

stripe.elements([options])

fonts
An array of custom fonts Elements created from the elements object can use.

It seems that it's expecting an array.

Try changing to

var elements = stripe.elements(
    {
        fonts: [{
            family:'Effra',
            src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')"
        }]
    }
);