wullvie_elements-custom-fonts | Stripe Developers | Page 1

hard mossBOT Jul 29, 2024, 3:54 PM

#

👋 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/1267510669335592980

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

winged violet Jul 29, 2024, 3:55 PM

#

I have also tried adjusting the element call to the following:

#

const elements = stripe.elements({ clientSecret: clientSecret, appearance: appearance }, options);

vagrant void Jul 29, 2024, 3:57 PM

#

Hi 👋

The fonts parameter is set in the options at the same level as the appearance parameter. We show this here: https://docs.stripe.com/js/elements_object/create#stripe_elements-options-fonts

#

We don't have a good example of setting custom fonts. I don't know that it accepts a source in the parameter itself though. Let me try to track down an example.

winged violet Jul 29, 2024, 3:58 PM

#

oh wait i see.. ugh easy miss

#

one sec

#

const fonts = [
{
family: 'SamsungOne-700',
weight: 700,
src: url(../fonts/SamsungOne-700.ttf)
}
]
const elements = stripe.elements({ clientSecret: clientSecret, appearance: appearance, fonts: fonts})

vagrant void Jul 29, 2024, 4:00 PM

#

Yeah, that looks like the CustomFontSource object we describe here
https://docs.stripe.com/js/appendix/custom_font_source_object

winged violet Jul 29, 2024, 4:01 PM

#

still having trouble getting it to render. no errors from using the last snippet tho

#

req_M18U3Yo9d1J1e7

vagrant void Jul 29, 2024, 4:02 PM

#

Okay, then I would recommend reviewing the Network and Sources tabs of your developer console to see if the font is being retrieved

winged violet Jul 29, 2024, 4:02 PM

#

after updating the src i see now Invalid font src configuration value. Expected "local(", "url(", or end of input but "." found."

#

maybe .ttf is the issue

vagrant void Jul 29, 2024, 4:02 PM

#

Okay, getting somewhere! New errors are exciting

winged violet Jul 29, 2024, 4:03 PM

#

i know the file path is correct - referencing the same url in other places same file and font loads as expected

vagrant void Jul 29, 2024, 4:04 PM

#

Yeah the tricky part is identifying if we are doing something "fancy" to the URL

winged violet Jul 29, 2024, 4:05 PM

#

passing url(...) is an allowed format here i think - from what i've seen at least

#

I

#

I'll try passing a hosted file instead of local see if that at least goes through

#

oh wow that worked lol

vagrant void Jul 29, 2024, 4:08 PM

#

Interesting 🤓

winged violet Jul 29, 2024, 4:08 PM

#

ok so I'll see if i can figure out a way to get the local file path url to work, if not this will do!

vagrant void Jul 29, 2024, 4:09 PM

#

Can you share what the font object looks like now? I'm trying to repro

winged violet Jul 29, 2024, 4:09 PM

#

src: 'url(https://maestro.sickksoftware.com/assets/fonts/SamsungOne-700.ttf)'

#

same font, just using the public file loc from my site

vagrant void Jul 29, 2024, 4:12 PM

#

Okay.... interesting

winged violet Jul 29, 2024, 4:14 PM

#

i'll play around with trying to get a local url to work otherwise I'm all set. thanks again for the help!

vagrant void Jul 29, 2024, 4:15 PM

#

Sure thing, it's why we're here 🙂

#wullvie_elements-custom-fonts