Scope

 Is it possible to change the font on a Chargebee-hosted page?

Summary:

Chargebee comes with several themes in the PC 1.0 version for your hosted pages. You can customize these themes to match your website's look and feel and apply them to your hosted pages. From this theme section, you will also have the option to change the font as your business needs. You can configure the font from Checkout & Self-Serve Portal Index page. 

If you are using PC 2.0, there is no UI setting to change the font size but it can be done using CSS. 

Solution:

Checkout v2:

To configure your hosted pages themes, go to Settings > Configure Chargebee > Checkout & Self-Serve Portal > Themes > Configure Theme

Then navigate to ‘Typograhpy’ to change fonts. At this section you will have options to change fonts for Body Text font, Heading Text font & Brand name Text font. 

You also have options to change text colors using the color code. 

For more information, refer to this link Configuring themes

Checkout v3:

What are the different customizations possible?

• You can pass your CSS styles to Chargebee Components and customize font, color, placeholder, etc. Check our API reference for all CSS properties supported.

• Placeholder text

• Localization

• Callback support for different component states like focussed, complete, invalid and empty

• You can specify which CSS class should be added based on different states, to the container that holds the iframe.