How to Change the Font in Stripe Payment Gateway for WooCommerce

When integrating Stripe with WooCommerce, you may notice that the default payment fields use the standard Stripe font, which might not match your website’s branding. Fortunately, you can customize the font in Stripe Elements to ensure a seamless user experience.

However, one common issue many developers face is CORS (Cross-Origin Resource Sharing) errors when loading custom fonts directly from their servers. The best way to bypass this issue is by hosting the font on a CDN (Content Delivery Network).

In this guide, we'll walk you through the complete process of changing the font in Stripe payment fields, including how to upload fonts to a CDN to avoid CORS issues.

---

Step 1: Upload Your Font to a CDN

Since loading a font from your own server can result in CORS errors, the best solution is to host it on a CDN. You can use services like jsDelivr, GitHub Pages, Google Cloud Storage, or Cloudflare to store and serve your font files.

How to Upload Your Font to jsDelivr (Using GitHub)

1. Create a GitHub Repository (if you don’t have one).
2. Upload your font files (e.g., .woff, .woff2, .ttf).
3. Push the repository to GitHub.
4. Get the CDN link using jsDelivr:
   • Format: https://cdn.jsdelivr.net/gh/your-username/repository-name/path-to-font-file
   • Example: https://cdn.jsdelivr.net/gh/chauhan07/snipshot/Reo_Sans/stylesheet-reo.css?ver=1.0.0

Once your font is uploaded to a CDN, you can reference it in your WooCommerce Stripe integration.

---

Step 2: Modify WooCommerce Stripe Payment Elements

WooCommerce Stripe allows customization of payment form styles using filters. To change the font, add the following PHP code to your theme’s functions.php file:

// Add custom font to Stripe Elements in WooCommerce
add_filter('wc_stripe_get_element_options', function ($options) {
    $options['fonts'] = [
        [
            'family' => 'Reo Sans',
            'src' => 'https://cdn.jsdelivr.net/gh/chauhan07/snipshot/Reo_Sans/stylesheet-reo.css?ver=1.0.0' // Replace with your CDN link
        ]
    ];

    $options['appearance'] = [
        'variables' => [
            'fontFamily' => '"Reo Sans", sans-serif'
        ],
        'rules' => [
            '.Input' => [
                'fontFamily' => '"Reo Sans", sans-serif',
                'fontSize' => '16px',
                'fontWeight' => '400',
                'color' => '#333333'
            ],
            '.Label' => [
                'fontFamily' => '"Reo Sans", sans-serif',
                'fontSize' => '18px',
                'fontWeight' => '400',
                'color' => '#000000'
            ]
        ]
    ];

    return $options;
});

Explanation of the Code

• Loads the custom font from the CDN.
• Defines the font family for Stripe payment fields.
• Ensures labels and input fields use the new font.
• Fixes the CORS error by using a third-party CDN instead of a local server.

---

Step 3: Clear Cache & Test

After making these changes, ensure the font applies correctly:

• Clear your cache (especially if you use a caching plugin like WP Rocket).
• Test in an incognito window to avoid browser cache interference.
• Inspect the Stripe elements using Developer Tools (F12 → Elements → Check font-family).

If the font doesn’t change, double-check your CDN URL and confirm that your font file is accessible.

---

Final Thoughts

By following this guide, you can easily change the font in the Stripe payment gateway for WooCommerce while avoiding CORS errors. Using a CDN ensures your fonts load quickly and securely, maintaining a seamless checkout experience for your customers.

If you have any questions or need further assistance, feel free to leave a comment below!

🚀 Happy coding!