React-stripe-elements: Unable to use custom local font in stripe elements

[vdmkotai]

Summary

I need to use custom font for stripe elements in my project. I want to use a local font (woff2 file), not loaded from google api (or from somewhere else)

I am trying to pass a font using the src option, as the documentation says.

const fontSrc = require('../../../../../assets/fonts/SofiaProLight.woff2')

...

<Elements
  fonts={[
    {
       src: `url(${fontSrc})`,
       family: 'Sofia Pro Light'
     }
   ]}
 >
...

but I receive error like this:

ui-shared-7d97009846d9703e925f7578a1dd7e87.js:1 
Uncaught Error: Invalid src value in font configuration: /static/media/SofiaProLight.b257f672.woff2. URLs have to start with 'https://' or 'data:'.
    at new t (shared-6e47e6c73b75fa884bddf2a1ada58645.js:1)
    at Ce (ui-shared-7d97009846d9703e925f7578a1dd7e87.js:1)
    at ui-shared-7d97009846d9703e925f7578a1dd7e87.js:1
    at Array.map (<anonymous>)
    at Me (ui-shared-7d97009846d9703e925f7578a1dd7e87.js:1)
    at Ue (ui-shared-7d97009846d9703e925f7578a1dd7e87.js:1)
    at ui-shared-7d97009846d9703e925f7578a1dd7e87.js:1
    at Array.map (<anonymous>)
    at Oe (ui-shared-7d97009846d9703e925f7578a1dd7e87.js:1)
    at shared-6e47e6c73b75fa884bddf2a1ada58645.js:1

I am using create-react-app config, if it's important.

[atty-stripe]

Hi @vdmkotai, for security purposes, we only allow passing in font URLs over HTTPS. During local testing, you can use a tool like ngrok to serve your website over HTTPS. This would make the font be served over HTTPS as well.

[vdmkotai]

@atty-stripe thanks, but that's not the problem
I am using HTTPS, but I want to pass relative URL to src (font-face src option has support for relative urls also, see docs). Or am I misunderstanding something?

[atty-stripe]

Ah, I see. We do not support relative URLs unfortunately, but I'll take that as a feature request. For now please specify the absolute URL.

[dweedon-stripe]

Hi @vdmkotai, wanted to let you know that this has been fixed. Feel free to use relative URLs when setting src.

[vdmkotai]

@dweedon-stripe, Cool, thanks!

[robinclaes]

@dweedon-stripe I'm having trouble adding a custom font - it's simply not working for me and I've tried several things over the past 2 days.

<Elements
  fonts={[
     {
          family: 'BloomSpeakBody',
          src: `url(${BloomSpeakBody})`
     }
  ]}
>
...
</Elements>


<CardNumberElement 
   placeholder="" 
   style={{ base: { fontFamily: 'BloomSpeakBody' } }} 
   onChange={handleChange} 
/>

Could you please help me or should I open a new issue? Thanks!

[Motassem-MK]

Hi @vdmkotai, wanted to let you know that this has been fixed. Feel free to use relative URLs when setting src.

Hello @dweedon-stripe , can you please confirm that relative URLs still work?

in my simple implementation I'm still getting Invalid src value in font configuration: http://localhost:8300/assets/fonts/geomanist-bold.woff. URLs have to start with 'https://' or 'data:'.

const elements = this.stripe.elements({
        fonts: [
          {
            family: 'Geomanist',
            src: 'url(/assets/fonts/geomanist-bold.woff) format(woff)'
          }
        ],
        locale: 'auto'
      });

[oliver-stripe]

Hi @Motassem-MK relative URLs now work, but they still need to be https in order to avoid mixed content issues. For local development, you can try using a tool like ngrok to test with https.

[Motassem-MK]

@oliver-stripe thank you for your answer, but I'm using Ionic (angular) and this is an android app, I cannot host my local files and refer to them with HTTPS, I believe it would be the same situation with React Native.
do you think there's anything I can do?

[oliver-stripe]

Hi @Motassem-MK - unfortunately, while we'd potentially consider loosening this in testmode, we wouldn't do this in livemode as it would result in mixed content issues, so you'd need to figure out some way to serve this over HTTPS if you needed to load these assets.

[thaitanloi365]

I have same issue but can't resolve it yet. Please help.

const inputStyle = {
  base: {
    height: '60px',
    fontSize: '20px',
    fontFamily: 'Averta',
    fontWeight: '600',
    fontSmoothing: 'antialiased',
    lineHeight: 1.56,
    letterSpacing: 'normal',
    color: Assets.colors.battleshipGrey,
    '::placeholder': {
      color: Assets.colors.battleshipGrey,
    },
  },
  invalid: {
    color: Assets.colors.warmPink,
  },
};

<CardElement
          style={inputStyle}
          className="cardNumber"
          hidePostalCode
 />

<Elements fonts={[
    {
      src: 'https://221b12b0.ngrok.io/fonts/Averta-Regular.otf',
      family: 'Averta',
      style: 'normal',
      weight: 'normal',
    },
    {
      src: 'https://221b12b0.ngrok.io/fonts/Averta-Bold.otf',
      family: 'Averta',
      style: 'normal',
      weight: '800',
    },

  ]}
  >
    <PaymentFormInjectStripe {...props} />
  </Elements>

[robert-narrate]

I know its late but I hope this helps someone

This is how I got it working:

const fontPath = `${window.location.origin}${require('assets/fonts/Gilroy-Regular.woff2').default}`

<Elements
  options={{
    fonts: [
      {
        src: `url(${fontPath})`,
        family: "Gilroy",
        style: "normal",
      },
    ],
  }}
/>

it gets the static path of the font when rendered.
One thing to also note is that it only works under https

[obulaworld]

Hi, I really can't get this to work. Am using react and am using useElement hook for my elements, not sure if there is a better way to handle passing fonts other than my implementation.

  const elFonts = [
    {
      family: 'Nunito',
      style: 'normal',
      src:
        'https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap',
    },
  ];

  return (
    <React.Fragment>
      {loader ? (
        <MainLoader />
      ) : (
        <BrowserRouter history={history}>
          <Elements stripe={stripePromise} fonts={elFonts}>
            <Switch>

[Minasokoni]

@obulaworld you need to wrap the url in url()