How do I apply a local custom font to Stripe Elements?

Question

I am trying to use a font from a local .otf file inside my project's directory in order to style the text within the inputs of the credit card form provided by Stripe Elements.

As this is a React project, I have been making use of the react-stripe-elements library. I have been referencing the following docs in tandem:

• react-stripe-elements
• Stripe.js & Elements

---

Here is where I attempt to use my desired font by passing it in through the fonts prop as specified in the react-stripe-elements docs:

<Elements
  fonts={[
    {
      family: 'geog',
      src: 'url(../../../shared/styles/fonts/Geogtq-Rg.otf)',
      style: 'normal',
      weight: '400',
    },
  ]}
>
  <StripeCCForm />
</Elements>

With this code, I get the following error:

Invalid src value in font configuration: ../../../shared/styles/fonts/Geogtq-Rg.otf. URLs have to start with 'https://' or 'data:'

---

I was under the impression that the src value could be a relative path to a local font, so I am quite confused as to why I am getting this error. Any insight would be greatly appreciated!

Answer 1

I'm working with Vue, and I originally had an answer here about having success with a require statement for src , but it turns out I didn't have to pass anything to stripe.elements at all. Instead, I have this:

const stripeStyle = {
  style: {
    base: {
      fontFamily: 'Font-Name',
      // fontSize, etc. if applicable
    },
  },
};

const elements = stripe.elements();
this.cardNumber = elements.create('cardNumber', stripeStyle);
// etc.

Here's the important part: The value for fontFamily matches the filename I import through a Sass file. For this example, I would have:

@font-face {
  font-family: "My Font";
  src: url("~@/assets/fonts/Font-Name.otf") format ("OpenType");
}

I'm not sure why this works, but hopefully it's possible for you to go about it this way.

Answer 2

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

I was just searching for the same and it worked. It didn't work on local because of not having https, but works perfectly in the production.