[Support request] Using Custom Fonts in WooCommerce Payments Stripe Credit Card Field

[codeberry]

Hello,

I’ve been researching how to change the font in the WooCommerce Payments Stripe credit card field all over the internet. I’m aware that it displays in an iframe, which can’t be changed using CSS. The WP filter that’s supposed to allow this customization no longer works, and I don’t even know if WooCommerce is working on this issue since the issue has been raised on their official GitHub but nothing done about it. In any case, the font in the credit card fields (Card Number, Expiration, and CVC) does not match the rest of the font that I’m using for my website.

Here is a screenshot for reference.

Is there any other solution to making the credit card fields match the global font used for the site? I’m asking because it looks really unprofessional and unfinished to have a site with a Sans-Serif font switch to a Serif font (Times New Roman) in the credit card fields.

As an aside, I’ve read and tried the methods suggested on WooCommerce (the filter there doesn’t work), WordPress.org, StackOverflow, and anywhere else as this is a common enough issue. Any help, if possible, would be appreciated. Thanks.

[Leo]

Hi there,

I’m aware that it displays in an iframe, which can’t be changed using CSS.

You are absolutely correct – iframe makes customizations like this very tricky and will likely require custom javascript.

Unfortunately I don’t have other suggestions for this. I would recommend bugging WooCommerce’ support team to see if they are able to point you in the right direction or the correct filter to use etc.

[Author]

Posts