#jarrett
half pelican
harsh plume
What does your style object look like right now?
harsh plume
Can you post as code instead of screenshots? Hard to debug if I can't paste into a text editor
distant plank
cssSrc: 'https://prod-cdn.emailable.com/assets/inter-48312a17da2a20d95c31b18566b2f082b306454b.css',
name: 'Inter',
weight: '500'
}]
export var stripe_appearance = {
theme: 'none',
variables: {
fontFamily: 'Inter',
fontSizeBase: '14px',
borderRadius: '8px',
spacingGridRow: '1.5em',
spacingGridColumn: '1em',
colorPrimary: 'rgb(51, 32, 94)',
colorText: 'rgb(51, 32, 94)',
colorTextSecondary: 'rgb(120, 110, 175)',
colorTextPlaceholder: 'rgba(120, 110, 175, 0.5)'
},
rules: {
'.Label': {
fontWeight: '500',
textTransform: 'capitalize',
fontSize: '14px',
marginBottom: '0.5em'
},
'.Input, .Tab, .CodeInput': {
boxShadow: 'inset 0 0 0 1px rgb(207, 207, 241)',
padding: '0.9275rem 0.9375rem',
color: 'rgb(120, 110, 175)',
fontWeight: '500',
},
'.Tab': {
fontWeight: '600',
},
'.Input:focus-visible, .Tab:focus, .Tab--selected': {
boxShadow: 'inset 0 0 0 2px rgb(126 97 255)',
outline: 'none',
backgroundColor: 'rgba(126, 97, 255, 0.05)'
},
'.Block, .PickerItem': {
boxShadow: 'inset 0 0 0 1px rgb(207, 207, 241)'
}
}
}
export default ({ stripe_fonts, stripe_appearance });
clientSecret: this.setupIntentClientSecretValue,
fonts: stripe_fonts,
appearance: stripe_appearance
});```
hexed cosmos
Hello 👋 Give me a sec to get caught up.
I can confirm that my Custom font in my PE integration does not appear either so at least we're starting with a working repro 😅
Look at all those ugly serifs!
It looks like we both need to add style rules specifically for the Dropdown Item: https://stripe.com/docs/elements/appearance-api?platform=web#dropdown
distant plank
it doesn't follow the base font?
hexed cosmos
It does not appear so. I had my variabels: {fontFamily: "Montserrat"} and you can see that is not followed here.
hexed cosmos
Well the docs say it's only DropdownItem that supports the fontFamily parameter but I"m having trouble there too
distant plank
i tried setting it on .DropdownItem and no luck
i don't think the font is being loaded into that iframe
it's also really hard to get dev tools open on the dropdown
without it closing
hexed cosmos
I'm asking some team members while I continue to test
distant plank
thanks
hexed cosmos
Okay this does appear to be an issue with dropdown and other elements (e.g. autocomplete) rendering in another iframe
distant plank
what font works in there that isn't shit so i can set a fallback i guess
i assume that would make it look a bit better
hexed cosmos
It's currently being investiaged
If we are able to address this it should automatically update your integration once the fix is deployed.
distant plank
in the interim i was just wonering what the default font is
because then i can at least set a fallback that isn't ugly and whenever it's fixed i'll get my nice font
but i won't have terrible serifs until then
hexed cosmos
Given it's so hard to inspect elements within 2 nested <iframe> elements, I haven't had any luck finding the font family used there.