React-stripe-elements: Custom fonts are not displayed in Stripe elements

[CatVas]

I use custom fonts in my project, including them in CSS through @font-face. E. g.:

@font-face{ font-family: AvenirLTStd-Roman; src: url(http://localhost:3000/webfonts/338CD6_4_0.woff2) format("woff2"); }

The font is displayed on web pages good.

However when I try to use it with Stripe elements, e. g.:

const style = { base: { font-family: 'AvenirLTStd-Roman, sans-serif' } }

<CardNumberElement style={style} />

the new font is not used! Though when I inspect the source code, this font is present in the CardNumberElement styles.

My suggestion is that Stripe elements are built with iframe, so maybe it prevents somehow to show custom fonts?

[jez]

Hey @CatVas!

Check out this link, which should help you work with web fonts:

https://stripe.com/docs/stripe-js/reference#stripe-elements

This is not a react-stripe-elements bug, so I'm going to close.

Feel free to follow up with our support team at https://support.stripe.com or on IRC in #stripe on freenode.

[iMerica]

I have the same issue.

Hi @jez,

1) The font-face styles I'm passing in via styles={} are not being used. What is the rationale for saying that this is not a react-stripe-elements issue?
2) Doesn't everyone benefit when the answers to questions like this are shown on Github issues rather than hiding the answers in IRC or the Stripe Support site? Have a look at the search engine rankings for questions like this:

Why not keep answers to questions where everyone is already looking?

• Customers win by getting the help they need in a self-sufficient manner.

• Stripe wins by not having to waste time answering the same question over and over.

Thanks,

Michael

[iMerica]

For anyone arriving here from Google, this is how I was able to make it work:

<CardElement
  onReady={this.handleReady}
  options={{
    fonts:[
      {
        src: 'https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2',
        family: 'Lato',
        style: 'normal',
      }
    ]
  }}
  style={
    {base: {
      fontSize: '16px',
      fontFamily: '"Lato", Helvetica, sans-serif',
    }}
  }
/> 

[SirNeuman]

@iMerica That's one way. The way that I got it to work, which i find more useful in my case since i have multiple elements and don't want to put the options in each element is to to do this in the Elements component:

<Elements
    fonts={[
        cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,500,600'
    ]}>
    <CardDetails />
</Elements>

and then in cardDetails.js just supply the font family in the style attribute for the CardElement.

[iMerica]

Very cool. Thanks @SirNeuman.

[MovingGifts]

Like @SirNeuman did, but it was missing a set of curly braces, this works:

<Elements
    fonts={[
        {cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,500,600'}
    ]}>
    <CardDetails />
</Elements>

[mlorencs]

In my case, I followed this implementation and had to do like @SirNeuman did, just add the missing curly braces like @MovingGifts said and change Elements fonts prop to options prop:

<Elements
        options={{
          fonts: [
            {
              cssSrc:
                "https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,500,600"
            }
          ]
        }}>

[kingarawana]

Here's my implementation in React:

const elStyle = {
    base: {
        fontFamily: 'Roboto, sans-serif',
        fontSize: '1.2rem',
        color: '#495057'
    }
};

const elFonts = [
    {
        src: 'https://fonts.googleapis.com/css?family=Roboto&display=swap',
        family: 'Roboto',
        style: 'normal',
    }
];

<Elements stripe={stripePromise} options={{fonts: elFonts}}>
...
<Elements/>

<CardNumberElement options={{placeholder: '', style: elStyle}}/>

Each element referenced elStyle.

[RigoTheDev]

New implementation should be:

<Elements
    fonts={[
        { src: "url(https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,500,600)", family: "Montserrat" }
    ]}
>
    <CardDetails />
</Elements>

Note the url(...)

[eiinvs]

@iMerica @kingarawana @MovingGifts @RigoTheDev can any of you guys help me out how to build stripe elements in HTML, I am currently using empty div method given in https://github.com/stripe/elements-examples/blob/master/js/example1.js

I am stuck very badly as below code and a few other experiments are not working at all & I need to submit this project with this font style only.

stripe.elements(
{
fonts:[{ cssSrc: 'https://fonts.googleapis.com/css?family=Poppins', }]
});