Stripe Elements UPE filter not loading custom fonts

Resolved Nick the Geek
(@nick_thegeek)

9 months, 3 weeks ago
I’m trying to get the Work Sans font to load in the stripe payment form, but nothing I’ve tried actually gets it to work. If I enable the classic checkout process it will load, but that is not ideal.

The theme font is selected and set in the variable, but the custom font is not loaded.

I tried using the UPE filters to set it using the custom font and the cssSrc from the Google font, but nothing will get it to load that font.

This is the current state of the filter, though I’ve tried multiple variations to try and use element_options etc. I can verify the values in the object, but it does not load in the checkout form.
```
/**

* Modify Stripe parameters.

*

* @param array $params

* @return array

*/

function rkv_bfg_wc_stripe_upe_params( $params ) {

if ( empty( $params['elements_options'] ) ) {

$params['elements_options'] = [];

}

// Add custom fonts to Stripe elements options.

$params['fonts'] = [

[

'cssSrc' => 'https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap',

],

];

return $params;

}

add_filter( 'wc_stripe_upe_params', 'rkv_bfg_wc_stripe_upe_params', 99 );
```
I did find a similar question from over a year ago, but despite being marked resolved, it doesn’t include the solution.

The issue is that the documentation mentions a few things, but there is nothing about custom fonts, so I’m just guessing where to add it.

The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 21 total)

1 2 →

Plugin Support LovingBro (woo-hc)
(@lovingbro)

9 months, 3 weeks ago
Hi @nick_thegeek,

I understand you’re trying to load the Work Sans font into the Stripe Elements UPE checkout form, and while it works with the classic checkout, it’s not being applied with UPE — even though your filter injects the font settings correctly. That can definitely be frustrating, especially with the lack of clear documentation around custom fonts in this context.

You’re on the right track using the wc_stripe_upe_params filter, and your code looks mostly correct. However, the issue might be that the fonts key needs to be nested inside the elements_options array, rather than directly in $params.

Here’s a revised version you can try:
```
function rkv_bfg_wc_stripe_upe_params( $params ) {
    if ( empty( $params['elements_options'] ) ) {
        $params['elements_options'] = [];
    }

    $params['elements_options']['fonts'] = [
        [
            'cssSrc' => 'https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap',
        ],
    ];

    return $params;
}
add_filter( 'wc_stripe_upe_params', 'rkv_bfg_wc_stripe_upe_params', 99 );
```
This places the fonts setting in the correct structure as required by Stripe Elements. After applying this change, clear your site and browser cache, and reload the checkout page.

Let me know if that gets your custom font loading. Let’s see how it goes!
Thread Starter Nick the Geek
(@nick_thegeek)

9 months, 3 weeks ago
@lovingbro thanks for the quick response. I have tried using the elements_options property but it did not work to initiate the font load. This is what the wc_stripe_upe_params object looks like. (note, I stripped out some of the data and replaced with "etc": "...", so that the relevant details are easier to see.)
```
{

"gatewayId": "stripe",

"title": "Credit / Debit Card",

"etc": "...",

"elements_options": {

"gatewayId": "stripe",

"title": "Credit / Debit Card",

"etc": "...",

"fonts": [

{

"cssSrc": "https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"

}

]

},

"fonts": [

{

"cssSrc": "https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"

}

]

}
```
Moses M. (woo-hc)
(@mosesmedh)

9 months, 3 weeks ago

Hi @nick_thegeek,

Thank you for getting back to us and for the detailed explanation. Just to clarify, are you trying to load the custom font manually or through your theme?

If you’re loading it manually, please note that this involves custom code, which falls outside the scope of our support. In such cases, we recommend reaching out to WooExperts on platforms like codeable.io for help.

However, if you’re using your theme or a third-party plugin to load the font and it’s not working, we suggest contacting the theme or plugin developer directly for assistance.

Feel free to reach out if you have any other questions.

Thread Starter Nick the Geek
(@nick_thegeek)

9 months, 2 weeks ago

@mosesmedh,

The font is loading in the theme with no issue. However, Stripe loads an iframe in the checkout page so the font is not available inside the iframe.

The Stripe documentation suggests the Elements API allows adding a font.

The Woocommerce Stripe documentation suggests there is a filter which should allow passing along custom items to the Elements API when the object is initialized.

I appreciate that this is a “customization” but I’m not asking for someone to do this work, I just want proper documentation on how to do this. Others have asked the same. It seems the filter is not working the way it is expected to work.
Moses M. (woo-hc)
(@mosesmedh)

9 months, 2 weeks ago
Hi @nick_thegeek,

I completely understand your concern. You can find the official documentation for styling the Stripe payment form here: WooCommerce Stripe Styling Guide.

I’ve reviewed your code, and it looks correct. However, if it’s not working as expected, the issue might be related to loading the font using cssSrc without explicitly instructing Stripe to use it, or it could be due to transient caching preventing the changes from appearing immediately.

Instead, try this alternative method by first enqueueing the Google font directly within your theme like so:
```
function load_google_fonts_for_stripe() {
    wp_enqueue_style( 
        'google-fonts-stripe', 
        'https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600&display=swap',
        [],
        null
    );
}
add_action( 'wp_enqueue_scripts', 'load_google_fonts_for_stripe' );
```
Then apply the font to the Stripe element using the following filter:
```
add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
    $stripe_params['blocksAppearance'] = (object) [
        'variables' => (object) [
            'fontFamily' => '"Work Sans", sans-serif',
            'fontSizeBase' => '16px',
            'fontWeightNormal' => '400',
        ],
    ];
    return $stripe_params;
});
```
If the style still doesn’t apply, try clearing the transients that might be caching the old appearance. Start by clearing your site cache, then go to WooCommerce > Status > Tools and use the available options to clear transients and template cache.

If that doesn’t resolve it, you can force-clear the Stripe-specific transients with the following code. Add it temporarily to your functions.php file, load any page once to execute it, then remove the code:
```
function clear_stripe_transients() {
    delete_transient( 'wc_stripe_appearance' );
    delete_transient( 'wc_stripe_blocks_appearance' );
}
add_action( 'init', 'clear_stripe_transients' );
```
Let me know how it goes.
Thread Starter Nick the Geek
(@nick_thegeek)

9 months, 2 weeks ago

Thanks,

The issue is not with loading the font in the theme. That loads just fine.

The issue is that the font does not load in the Stripe iframe.

I have tried doing this with cssSrc and with a customFontSrc object https://docs.stripe.com/js/appendix/custom_font_source_object

Neither one are allowing the font to load inside the iframe.

The font family styles are being correctly applied within the iframe, but since the font is not loaded, it is showing the wrong font.

Moses M. (woo-hc)
(@mosesmedh)

9 months, 2 weeks ago

Hi @nick_thegeek,

Thanks for getting back and for clarifying. Could you let me know how you’re currently loading the font in your theme? I ask because some themes load fonts only for specific areas like headers and body text, and may exclude them from the checkout page entirely.

The method I shared earlier ensures the font is loaded globally through WordPress, so it might be worth giving it a try. If you’ve already tried a different method, it’s also possible that a transient cache is preventing the changes from taking effect.

Have you had a chance to try clearing the transient cache as I suggested earlier?

Thread Starter Nick the Geek
(@nick_thegeek)

9 months, 1 week ago

The fonts are being loaded via the theme.json file.

The fonts are on the checkout page.

The issue is the Stripe checkout box is in an <iframe>. This means the fonts and CSS loaded in the checkout page are not used within the <iframe> content.

That is what the elements API is supposed to address.

I did clear transients and caches. I also confirmed the wc_stripe_upe_params object shows the changes on the front end. It really feels like there is a bug that is causing some of the parameters in the wc_stripe_upe_params from being applied.

Moses M. (woo-hc)
(@mosesmedh)

9 months, 1 week ago

Hi @nick_thegeek,

Thank you for getting back and for the clarification. The code shared here: https://woocommerce.com/document/stripe/customization/style-payment-form/#section-4 appears to be the only available workaround at the moment.

We’ve also checked internally, and any further customization beyond this falls outside the scope of support provided on this forum. If you’d like to explore it further, I recommend opening an issue here: https://github.com/woocommerce/woocommerce-gateway-stripe/issues so the development team can review it.

Thread Starter Nick the Geek
(@nick_thegeek)

9 months, 1 week ago

The problem is, that code is not working. As you said previously, it looks like the code I posted is right. Which means there is a bug OR the documentation is incorrect. Either way that is the issue at stake here, not customization, but a bug or invalid documentation.

And this is not the first time someone has asked about this issue, which leads me to think this is an ongoing issue with the plugin.
Plugin Support shahzeen(woo-hc)
(@shahzeenfarooq)

9 months, 1 week ago
Hi there!

I can understand your concern. I have tried to replicate the issue by changing the font family using the following code and Its working fine on my end with block base checkout
```
add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
	$stripe_params['blocksAppearance'] = (object) [
		'variables' => (object) [
			'fontFamily' => 'cursive',
		],
	];
	return $stripe_params;
} );
```
Here is a screenshot showing that the monospace font is appearing fine on my site using the Blockbase checkout: https://go.screenpal.com/watch/cTjjQEnI9R5

If that code is not working on your site for the custom font, the issue might be related to how the custom font is loading on your site. Since customization is outside the scope of our support, we won’t be able to assist further with that.

I can recommend WooExperts and Codeable.io as options for getting professional help. Alternatively, you can also ask your development questions in the WooCommerce Community Slack as custom code falls outside our usual scope of support.
Thread Starter Nick the Geek
(@nick_thegeek)

9 months, 1 week ago

You are testing the wrong thing.

You tested a generic font. That’s easy. I have the fontFamily working. If you went to the site to visit the checkout, you’d could inspect the Stripe form and see that the font-family is "Work Sans". But it does not render as the right font because it needs to load that font in the <iframe>.

Here is a screen shot clearly showing the font-family is correctly set but the wrong font is being used (note that the “card number” and other labels have a serif font when the CSS below shows it is supposed to be “Work Sans” which is a sans-serif font.)

This is not an issue loading in the site.

It is an issue loading in the iframe, which is separate from the site and requires interacting with the Stripe Elements API. This is supposed to be available via the UPE filter, but it is NOT working.

I’m not asking for customization. I’m asking for a bug to be fixed or the documentation updated with a working example of the font, either custom or Google Font, being loaded.

Because this is not working the way it should be. If I’m doing something wrong, that is a failure in the documentation because you even said this looks like the code is right and I’ve been able to verify the javascript object that is used to generate the call for the Stripe Elements API has the correct values in it, but something is not working. I suspect something in the code is stripping out the font or replacing it with a different font before initializing the call.

To make this clear, I set this up locally with the Twenty-Twentyfive theme, Woocommerce, and the Stripe gateway. If you need proof, here is the system report I downloaded.

This has no other plugins active, it is the current default theme.

When I look at the checkout page it *looks* like it could be right. I inspect the element and it shows Manrope, sans-serif as the selected font. BUT if you edit to remove sans-serif it reveals that the Manrope font is not loaded because the font switches to a serif font. It only *looked* right because it was falling back.

So I add the code that *should* enable this Google Font, but that fails to work.

If this is happening with the default theme and absolutely ZERO modifications, then it seems to be a bug.

Not a customization request.

A bug.

I’m not asking for help doing something custom.

I’m saying there is a bug.

Moses M. (woo-hc)
(@mosesmedh)

9 months, 1 week ago

Hi @nick_thegeek,

Thank you for the detailed explanation. I sincerely understand your concern however this forum is to address functionality issues, concern and bug. Your request to use code is still part of customization and any issue regarding customization even if provided by us is still somewhat outside our support scope.

As my colleague mentioned, we have not been able to reproduce the issue. I understand you’re looking for a solution, but this falls outside the scope of what we can provide here in the support forum.

The best people to assist would be our development team and community developers, which is why I suggested creating an issue on GitHub so they can get involved: https://github.com/woocommerce/woocommerce-gateway-stripe/issues

Thank you for your understanding.

Thread Starter Nick the Geek
(@nick_thegeek)

9 months, 1 week ago

Did you ever try to replicate this correctly? I outlined how I replicated this using The default TwentyTwentyFive theme with ONLY WooCommerce and the WooCommerce Stripe Gateway plugin active.

No custom code at all.

Activate the out of the box WordPress default theme which uses Manrope font out of the box. No custom code at all.

Activate and setup WooCommerce and the WooCommerce Stripe Gateway plugin.

Go to checkout.

Inspect the labels on the credit card field.

It shows Manrope, sans-serif for the font-family but the displayed font is NOT Manrope.

That is as clear a bug report as any. This is a bug. These steps do not require a single line of custom code.

I explained this along with screenshots in my prior comment. Please take the time to replicate the exact steps I laid out, not the wrong steps that do not address the BUG that I am describing.

Moses M. (woo-hc)
(@mosesmedh)

9 months, 1 week ago

Hi @nick_thegeek,

Thank you for your reply, but it seems we might be troubleshooting two different issues. Your initial request was about loading a custom font in the Stripe payment fields using the default code provided here: https://woocommerce.com/document/stripe/customization/style-payment-form/#section-4. You mentioned that it wasn’t working for you, whereas my colleague @shahzeenfarooq tested the same code and confirmed it worked which I also confirmed on my end.

However, from your last two responses, it sounds like you’re troubleshooting the font loading in general — without using that code — and referring to the fields not displaying your default font.

Could you clarify: is the problem that your checkout page isn’t loading your custom font at all, or that the provided code specifically isn’t working for you?

Viewing 15 replies - 1 through 15 (of 21 total)

1 2 →

You must be logged in to reply to this topic.