Reference

📓Fontdue.js📓GraphQL📓Demo template

Guides

📓Webflow📓Wordpress + Lay Theme📓Wordpress + Semplice📓Next.js (App Router)📓Next.js (Pages Router)

Information

📓Full-service website development📓Managing your font catalog📓Variable fonts📓Font licenses📓Webfonts📓Cross-origin access📓Payments with Stripe📓Tax📓Test fonts📓Test mode📓Manage your Fontdue subscription📓Launching your site📓Troubleshooting📓Customize the Address fields

Updates

📓What’s new📓Update 001📓Update 002📓Update 003📓Update 004📓Update 005

⚡

Start free trial →

Customize the Address fields

During the checkout process we take advantage of Stripe’s Address Element. We try to match the style of the fields to the Fontdue theme, but you may want to take more control over the style. You can do this by passing the Stripe Appearance config to the fontdue.initialize() (using Fontdue.js) or with the FontdueProvider (using the React components).

The full Appearance API documentation is here: https://docs.stripe.com/elements/appearance-api

<script type="module">
  import fontdue from "https://js.fontdue.com/fontdue.esm.js";
  
  fontdue.initialize({
    config: {
      // .... your existing config here ....
      
      stripe: {
        appearance: {
          theme: 'flat',
          variables: {
            // you can use your "UI Font" here: change the name to your UI Font family's name
            fontFamily: 'YourUIFontFamily Regular',
            
            // the UI Font weight is always 400
            fontWeightLight: '400',
            fontWeightNormal: '400',
            fontWeightMedium: '400',
            fontWeightBold: '400',
            
            // here are some example settings you can modify and add to
            borderRadius: '0',
            spacingUnit: '5px',
            fontSmooth: 'always',
            fontSizeBase: '16px',
          },
        },
      },
    },
  });
</script>