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!

Adsorbent

On a fonts-on-the-web note, rather than a solution to what looks like a bundling problem, you don't want to use a raw .otf file, you want woff or woff2 – Birgitbirgitta

Did you ever find an answer to this. I am having the same issue – Hearn

@jgerstle, sorry for the slow response. I never did figure that out. Had to admit defeat, sadly. – Adsorbent

Still no solution to this? I am getting the same error messages. – Catapult

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.

Anthropo

Does this actually work outside of your machine? The stripe element uses an iFrame, which can't access the parent context's imported fonts. I have a feeling this might be working because there's a font installed locally on your machine with the font name, which is what the iFrame is referencing. This won't be the case for other users. – Frankfrankalmoign

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.

Thurnau