alexjoom_code | Stripe Developers | Page 1

flint nicheBOT May 5, 2025, 10:48 AM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1368902167749984278

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

#

lilac tendon May 5, 2025, 10:49 AM

#

Hi, let me help you with this.

#

What is the exact issue you're facing?

hushed heart May 5, 2025, 10:50 AM

#

I'm not able to load a custom font in my Stripe Element. I'd like to use the Montserrat font, but it doesn't seem to work.

#

document.addEventListener('DOMContentLoaded', () => {
            const stripe = Stripe('{{ stripePublicKey }}');

            const appearance = {
                variables: {
                    fontSizeSm: '16px',
                    colorText: '#121212',
                    fontFamily: 'Montserrat',
                }
            }

            const elementsCB = stripe.elements({
                clientSecret: '{{ clientSecretCB }}',
                appearance: appearance,
                fonts: [
                    {
                        family: 'Montserrat',
                        weight: '400',
                        src: 'url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format("woff2")',
                    },
                ],
            });
            const paymentElement = elementsCB.create('payment', {
                style: {
                    base: {
                        fontFamily: '"Montserrat", sans-serif',
                        fontSize: '16px',
                        color: '#32325d',
                    },
                },
            });
            paymentElement.mount('#payment-cb');
       })

lilac tendon May 5, 2025, 10:54 AM

#

Where do you see that it doesn't work exactly? Do you have a screenshot?

flint nicheBOT May 5, 2025, 11:01 AM

#

hushed heart May 5, 2025, 11:07 AM

#

lilac tendon Where do you see that it doesn't work exactly? Do you have a screenshot?

#

The font doesn't change 😦

wild cape May 5, 2025, 11:16 AM

#

hushed heart ```js document.addEventListener('DOMContentLoaded', () => { const st...

There is no Style attribute when creating a PaymentElement:
https://docs.stripe.com/js/elements_object/create_payment_element

hushed heart May 5, 2025, 11:18 AM

#

Ok thx, new code (same problem) :

            const stripe = Stripe('{{ stripePublicKey }}');

            const appearance = {
                variables: {
                    fontSizeSm: '16px',
                    colorText: '#121212',
                    fontFamily: 'Montserrat',
                }
            }

            const elementsCB = stripe.elements({
                clientSecret: '{{ clientSecretCB }}',
                appearance: appearance,
                fonts: [
                    {
                        family: 'Montserrat',
                        weight: '400',
                        src: 'url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format("woff2")',
                    },
                ],
            });
            const paymentElement = elementsCB.create('payment');
            paymentElement.mount('#payment-cb');

wild cape May 5, 2025, 11:23 AM

#

Let me do a quick test...

hushed heart May 5, 2025, 11:24 AM

#

Thx

wild cape May 5, 2025, 11:37 AM

#

I just did a test with your code and I see the front updated

#

With font

#

Without font

hushed heart May 5, 2025, 11:42 AM

#

Wtf

#

You are using HTTPS ? HTTP ? Wamp server ?

wild cape May 5, 2025, 11:43 AM

#

Https

hushed heart May 5, 2025, 11:43 AM

#

I use http with localhost

wild cape May 5, 2025, 11:45 AM

#

I don't think that's an issue..

hushed heart May 5, 2025, 11:46 AM

#

Ok

wild cape May 5, 2025, 11:46 AM

#

hushed heart

But wait, the font here is applied.. check the character N

hushed heart May 5, 2025, 11:48 AM

#

wild cape But wait, the font here is applied.. check the character `N`

#

Here is an uppercase 'N' with Montserra

wild cape May 5, 2025, 11:50 AM

#

Can you comment the line fontFamily: 'Montserrat', and see the difference ?

hushed heart May 5, 2025, 11:51 AM

#

CSS variable :
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif

wild cape May 5, 2025, 11:53 AM

#

hushed heart

There is a difference between this one and the new one

#

The font seems to be applied or at least there is a change...

hushed heart May 5, 2025, 11:56 AM

#

I don't think so, because if I don't use any code to change the font, I get exactly the same result.

wild cape May 5, 2025, 12:06 PM

#

Well, if you check the two screenshots you've shared, you'll see a difference

#

Check the N char

hushed heart May 5, 2025, 12:11 PM

#

Yes, but i think sans-serif is use

#

Because if I remove the sans-serif, Montserrat alone doesn't work.

wild cape May 5, 2025, 12:12 PM

#

Sorry, I'm not sure I understand the link between commenting the line fontFamily: 'Montserrat' in Stripe and the change with sans-serif ?

hushed heart May 5, 2025, 12:14 PM

#

No problem, if i use this code :

            const appearance = {
                variables: {
                    fontSizeSm: '16px',
                    colorText: '#121212',
                    fontFamily: 'Montserrat, sans-serif',
                }
            }

It's the same result with :

            const appearance = {
                variables: {
                    fontSizeSm: '16px',
                    colorText: '#121212',
                    fontFamily: 'sans-serif',
                }
            }

And if i use only Montserrat, the font doesnt work :

            const appearance = {
                variables: {
                    fontSizeSm: '16px',
                    colorText: '#121212',
                    fontFamily: 'Montserrat',
                }
            }

#

So that's why I think Montserrat is not being loaded correctly, and I don't understand why.

wild cape May 5, 2025, 12:16 PM

#

What about using:

const appearance = {
                variables: {
                    fontSizeSm: '16px',
                    colorText: '#121212',
                }
            }

and what is the difference between it and with fontFamily: 'Montserrat',

hushed heart May 5, 2025, 12:18 PM

#

I would like to use Montserrat on the Stripe elements because I want to use the same font as the rest of my project.

wild cape May 5, 2025, 12:19 PM

#

Yeah I understand that, but my point is according to the scrrenshots you've shared, there is a font change by adding fontFamily: 'Montserrat',

hushed heart May 5, 2025, 12:21 PM

#

Look :

With my code :

            const stripe = Stripe('{{ stripePublicKey }}');

            const elementsCB = stripe.elements({
                clientSecret: '{{ clientSecretCB }}',
            });
            const paymentElement = elementsCB.create('payment');
            paymentElement.mount('#payment-cb');

I have this result :

#

And with that :

            const stripe = Stripe('{{ stripePublicKey }}');

            const appearance = {
                variables: {
                    fontSizeSm: '16px',
                    colorText: '#121212',
                    fontFamily: 'Montserrat',
                }
            }

            const elementsCB = stripe.elements({
                clientSecret: '{{ clientSecretCB }}',
                appearance: appearance,
                fonts: [
                    {
                        family: 'Montserrat',
                        weight: '300',
                        src: 'url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format("woff2")',
                    },
                ],
            });
            const paymentElement = elementsCB.create('payment');
            paymentElement.mount('#payment-cb');

#

wild cape May 5, 2025, 12:24 PM

#

Yes exactly, see there is a difference in the font in these screenshots

#

Isn't that Montserrat? or at least the font of that url you are specifying ?

hushed heart May 5, 2025, 12:25 PM

#

No its the default font 😦

wild cape May 5, 2025, 12:26 PM

#

You mean in both screenshots you've just shared, it's the same (default) font 🤔

#

I'm seeing difference fonts actually 😅

hushed heart May 5, 2025, 12:28 PM

#

Yes, me too x)

But in the first screenshot, it's the default Stripe font that's being used:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif

And in the second one, it's the browser's default font because Montserrat fails to load.

wild cape May 5, 2025, 12:33 PM

#

because Montserrat fails to load.
Ah do you see any logs for this ?

hushed heart May 5, 2025, 12:39 PM

#

I have only :
v3/:1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.

wild cape May 5, 2025, 12:44 PM

#

Ok, this issue will require an in-depth investigation from our team in order to figure out the root cause. Can we ask that you write in to us via https://support.stripe.com/contact, providing as much detail and context as possible (you can also reference this thread).

flint nicheBOT May 5, 2025, 12:44 PM

#

Hello @hushed heart, we have sent you a direct message, please check it at https://discord.com/channels/@me/1368931267483144343

🔗The message has instructions on how to open a direct support case with our Developer Support team, in order to help you more effectively.

hushed heart May 5, 2025, 12:58 PM

#

Thanks ! 🙂

#alexjoom_code

Hello @hushed heart, we have sent you a direct message, please check it at https://discord.com/channels/@me/1368931267483144343