#vane-elements-font
celest arch
Did you pass in a CssFontSource or CustomFontSource to the elements.fonts array as well?
https://stripe.com/docs/js/elements_object/create#stripe_elements-options-fonts
celest arch
Ah, that I'm not sure about
dense ingot
elements.fonts = {
family: 'Poppins',
src: 'url(localhost/sources/Poppins-Regular.ttf)',
}
I tried this, not working
celest arch
Let me check if I have a colleague who can confirm how/why this might not be working
loud drift
Hello! I think you're just trying to put the font information in the wrong place. Can you give this a try?
var elements = stripe.elements({
fonts: [
{
family: 'Poppins',
src: 'url(http://localhost/sources/Poppins-Regular.ttf)',
},
]
});
(Made a quick edit to the font URL).
loud drift
So the fonts property in the Elements options allows you to specify custom fonts, but you have to specify where you want them to be used as well.
dense ingot
it looks similar though, so, I can't tell if its applying or not.
dense ingot
So the `fonts` property in the Elements options allows you to specify custom fon...
how would I specify where?
loud drift
See the snippet here: https://stripe.com/docs/stripe-js/appearance-api#variables
loud drift
Getting closer!
dense ingot
const appearance = {
theme: 'night',
variables: {
colorDanger: "rgb(255, 59, 59)",
colorSuccess: "rgb(29, 179, 7)",
colorPrimary: "rgb(29, 179, 7)",
colorBackground: "rgb(39, 39, 43)",
fontFamily: "Poppins",
},
fonts: [
{
family: 'Poppins',
src: 'url(http://localhost/sources/Poppins-Regular.ttf)',
}
]
};
No, fonts does not go inside appearance.
fonts goes alongside appearance: https://stripe.com/docs/js/elements_object/create
dense ingot
I'm starting to think this is the applied version despite html saying other font families
dense ingot
since now its just looking like this.
loud drift
It might be an issue with the font being hosted locally. Can you try the Google Fonts URL instead?
dense ingot
const fonts = [
{
cssSrc: "https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
}
]
// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
const elements = stripe.elements({clientSecret,appearance, fonts});
tried this, looks like this
im pretty sure its applying it, and if not then like this it looks fine
I'll just change the weight and it'll look good
loud drift
Just tested this and it works:
const elements = stripe.elements({
clientSecret: '<?php echo $paymentIntent->client_secret; ?>',
fonts: [
{
cssSrc: 'https://fonts.googleapis.com/css2?family=Poppins&display=swap',
},
],
appearance: {
theme: 'stripe',
variables: {
fontFamily: 'Poppins',
},
},
});