Cannot override the fonts used in Stripe Payment Element

[thisisjamessmith]

Description

The Stripe docs describe how to override the fonts used in their new Payment Element here: https://stripe.com/docs/js/elements_object/create#stripe_elements-options-fonts - however, this is not possible from Craft's Stripe plugin when using getPaymentFormHtml(). We have plenty of power to alter the design by using the appearance object, which works really well. But custom fonts do not work, not with cssSrc or a custom font source object.

Steps to reproduce

I would expect either of the following to work:

{% set stripeParams = {
    fonts: [{
        family: 'Avenir',
        src: 'url(https://my-domain.com/assets/avenir.woff)',
        weight: '500',
    }],
    appearance: {
        variables: {			
            fontFamily: 'Avenir',
            ...
        },
        ...
    }
} %}

{% set gateway = craft.commerce.gateways.getGatewayById(1) %}
{{ gateway.getPaymentFormHtml(stripeParams)|raw }}

or

{% set stripeParams = {
    fonts: [{
        cssSrc: 'https://fonts.googleapis.com/css2?family=Inter'
    }],
    appearance: {
        variables: {
            fontFamily: 'Inter',
            ...
        },
        ...
    }
} %}

{% set gateway = craft.commerce.gateways.getGatewayById(1) %}
{{ gateway.getPaymentFormHtml(stripeParams)|raw }}

Additional info

• Craft CMS version: 4.5.6.1
• Craft Commerce version: 4.3.0
• Stripe for Craft Commerce version: 4.0.0
• PHP version: 8.1
• Database driver & version: MySQL 8

[lukeholder]

@thisisjamessmith do you get an error or are you saying it's just not working? I would have thought the reference to the font would be enough but you would need to load the font yourself into the page?