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:

score 13 · Answer 1 · edited Jul 11 '19 at 09:16

Here is the my working example (it works on my side).

var stripe = Stripe('pk_test_........'); // paste your stripe public key here

var elements = stripe.elements({
  fonts: [
    {
      // integrate your font into stripe
      cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:400,500',
    }
  ]
});

const style = {
  base: {
    color: '#32325d',
    fontFamily: 'Montserrat, sans-serif',  // set integrated font family
    fontSmoothing: 'antialiased',
    fontSize: '17px',
    '::placeholder': {
      color: '#e5286a'
    }
  }
};

this.card = elements.create('card', {
  style: style,
  hidePostalCode: true,
});
this.card.mount(this.cardInfo.nativeElement);

score 11 · Answer 2 · answered May 06 '17 at 21:39

11

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>

answered May 06 '17 at 21:39

user1367323

361
2
7

Hi dude, do you know how can i add my local-font to stripe.elements? I'm getting this error: Invalid src value in font configuration: /static/my-local-path/my-font.woff. URLs have to start with 'https://' or 'data: – Giancarlos Oct 18 '17 at 16:29
2

@Giancarlos since the font is loaded in an iFrame you need to specify the full path. https://yoursite.com/static/my-local-path/my-font.woff. – lcharbon Dec 17 '17 at 17:25
What if I have a local path that starts with *localhost*? I can't get this to work... – Tintin81 Jun 21 '19 at 16:37
GOTCHA: If you are using Hot Module Reloading, and you make changes to the config for this, it won't update until you refresh the page. I'd got the code right but thought it wasn't working - I just needed to refresh the page and it was fine. – James Ellis-Jones Apr 05 '21 at 16:45

score 3 · Answer 3 · answered May 06 '17 at 19:50

3

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')"
        }]
    }
);

answered May 06 '17 at 19:50

Alex

37,502
51
204
332

Thanks for the reply. No luck however.. Tried the [ ] before the outer { } also.. The Effra is used as the font-family in the iframe, just not defined with anything (src.... tried simply with italic and nothing) Any help would be appreciated – user1367323 May 06 '17 at 20:24

score 0 · Answer 4 · answered May 06 '17 at 20:54

I think its a formatting error , you are missing some commas.

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

Custom font src with Stripe

4 Answers4

Linked