How do I add a custom font to my Card Element when using React Stripe Elements?

Question

I am using react-stripe-elements, but the readme doesn't explain how to add a custom font.

I have a container:

  <StripeProvider apiKey={stripePubkey}>
    <Elements>
      <Checkout {...this.props} />
    </Elements>
  </StripeProvider>

And then inside my Checkout, I have a wrapper credit card input:

<form id="payment-form" onSubmit={this.onSubmit}>
   <CreditCardInput />
</form>

And then my wrapper credit card input is:

  <label>
    Card info
    <CardElement onChange={this.onCardChange} style={style} />
    <div id="card-errors" role="alert">{this.state.error.message}</div>
  </label>

The style that is passed into the <CardElement />:

const style = {
  base: {
    color: '#232e35',
    fontFamily: '"Podkova", "Courier New", serif',
    fontSize: '16px',
    '::placeholder': {
      color: '#9ab4b0'
    }
  },
  invalid: {
    color: '#cf3100',
    iconColor: '#cf3100'
  }
};

Answer 1

It turns out that stripe.elements([options]) from the Stripe API maps to the <Elements /> component in react-stripe-elements. Thus, you add your cssSrc to the fonts option/attribute like so:

  render() {
    const fonts = [{ cssSrc: "https://fonts.googleapis.com/css?family=Podkova:400" }]

    return (
      <StripeProvider apiKey={stripePubkey}>
        <Elements fonts={fonts}>
          <Checkout {...this.props} />
        </Elements>
      </StripeProvider>
    )
  }

Answer 2

I had to do a modification to Sja's answer to get it to work in my case. (Im using loadStripe instead of the StripeProvider btw.)

const options = {
  fonts: [
    {
      src: require("path-to-font"),
      family: "Fontname",
    },
  ],
}

<Elements stripe={loadStripe(stripe_public_key)} options={options}>

This has been addressed here as well: https://github.com/stripe/react-stripe-elements/issues/285