scmitton | Stripe Developers | Page 1

terse currentBOT Mar 28, 2023, 1:45 PM

#

normal dawn Mar 28, 2023, 1:46 PM

#

👋 happy to help

#

would you mind sharing the resources' links that you've used for this?

iron fractal Mar 28, 2023, 1:50 PM

#

Are you referring to the stripe docs? https://stripe.com/docs/js/elements_object/create

Stripe JS Reference

normal dawn Mar 28, 2023, 1:51 PM

#

all of the ways I've found in the github issue on this topic, and the methods outlined in the stripe docs
these

iron fractal Mar 28, 2023, 1:52 PM

#

https://github.com/stripe-archive/react-stripe-elements/issues/179

GitHub

Custom fonts are not displayed in Stripe elements · Issue #179 · st...

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(&quot...

normal dawn Mar 28, 2023, 1:54 PM

#

taking a look give me a couple of minutes

iron fractal Mar 28, 2023, 1:56 PM

#

Ok, update I tried a different font, and it actually worked. So maybe there's an issue with just that font.

normal dawn Mar 28, 2023, 1:59 PM

#

yes maybe

#

that's what I was trying to figure out honestly

#

happy it worked out for you

iron fractal Mar 28, 2023, 2:01 PM

#

Well it's not working with the font I want still. Do you have any suggestions on how to work around that?

normal dawn Mar 28, 2023, 2:02 PM

#

what is the font that worked for you?

iron fractal Mar 28, 2023, 2:05 PM

#

Open Sans worked, but Source Sans 3 has not

normal dawn Mar 28, 2023, 2:06 PM

#

would you mind sharing the link?

#

the cssSrc

iron fractal Mar 28, 2023, 2:07 PM

#

https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600&display=swap

normal dawn Mar 28, 2023, 2:08 PM

#

Open sans is already part of the default font family

#

I don't think it worked

iron fractal Mar 28, 2023, 2:12 PM

#

I tried loading Source Sans 3 from type kit, and it looks to have worked

normal dawn Mar 28, 2023, 2:16 PM

#

actually I go it working with this

{
  appearance: {
    theme: 'stripe',
    variables: {
      fontFamily: 'Source Sans 3'
    },
  },
  fonts: [{ cssSrc: "https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400&display=swap" }]
}

iron fractal Mar 28, 2023, 2:21 PM

#

And you pass this as options to Elements? I'm using CardElement btw

hallow plinth Mar 28, 2023, 2:24 PM

#

Hello 👋
Afaik the Appearance API doesn't support CardElement yet 😦

The example tarzan shared is w/ Appearance API
https://stripe.com/docs/elements/appearance-api

iron fractal Mar 28, 2023, 2:27 PM

#

But I can still customize by passing a styles object to CardElement? I found that on this guide: https://stripe.com/docs/payments/card-element#style-input

#

It says to customize fonts by initializing Elements with a font set

hallow plinth Mar 28, 2023, 2:31 PM

#

Yup, I'd recommend giving it a try tbh.

iron fractal Mar 28, 2023, 2:32 PM

#

That's what I've been doing though, and why I was lead to my original question.

#

I'm passing the fonts list in the options object like so: let options = {
fonts: [{
cssSrc: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap"
}]
}

export default function Checkout() {

return (
    <Elements stripe={stripePromise} options={options}>
        <PaymentWindow />
    </Elements >
)

};
But it's not working.

hallow plinth Mar 28, 2023, 2:34 PM

#

that's probably because fonts isn't a valid param for card element style
https://stripe.com/docs/js/appendix/style

iron fractal Mar 28, 2023, 2:45 PM

#

yes, I pass fonts to Elements in the options, like in the code snippet I shared just a message back. Then in the style for CardElement, I set fontFamily to Source Sans 3. But that font strangely is the only one not working from the fontsgoogleapi

hallow plinth Mar 28, 2023, 2:51 PM

#

Ah I see. my bad. I thought you were setting passing it on the wrong object. Never mind!
Give me a few..

#scmitton