New in Chargebee: Explore Reveal and understand your payment performance end-to-end.Try Now
Docschargebee docs
HomeBillingPaymentsRevRecGrowthReveal
Support

Product Updates

  • Release Notes

Getting Started

  • Overview
  • Chargebee Billing Data Centers
  • Object Relationship Model
  • Understanding Sites
  • Chargebee Tech Glossary
  • Articles and FAQ

Implementing Chargebee

  • Implementation Guide
  • Go-live Checklist
  • Articles and FAQ

AI in Chargebee

  • Chargebee Copilot
  • Chargebee Model Context Protocol (MCP) Server

Developer Resources

  • Developer Resources Overview
  • Articles and FAQ

Product Catalog

  • Product Catalog Overview
  • Coupons
  • Articles and FAQ

Subscriptions

  • Working with Subscriptions
  • Billing
  • Orders
  • Articles and FAQ

Customers

  • Managing Customers
  • Account Hierarchy
  • Email Notifications
  • Branding
  • Configure Multiple Languages
  • Articles and FAQ

Entitlements

  • Entitlements Overview
  • Features Overview
  • Feature Management
  • Managing Product Entitlements
  • Subscription Entitlements
  • Customer Entitlements
  • Grandfathering Entitlements
  • Articles and FAQ

Usage Based Billing

  • Understanding Usages
  • Setting up Usage Based Billing
  • Usage Alerts
  • Metered Billing
  • Articles and FAQ

Chargebee CPQ

  • Chargebee CPQ
  • Chargebee CPQ for Salesforce
  • Chargebee CPQ for HubSpot

Invoices, Credit Notes, and Quotes

  • Invoices
  • Credit Notes
  • Quotes [Legacy]
  • Transactions
  • Articles and FAQ

Taxes

  • Overview
  • Configuring Taxes
  • Country-specific Taxes
  • Articles and FAQ

Hosted Capabilities

  • Overview
  • Hosted Checkout
  • Hosted Self-Serve Portal
  • Hosted Pages Features
  • Additional Hosted Pages
  • Payment Components
  • Pricing Table
  • Managing Payments with Chargebee.js
  • Mobile-Optimized Hosted Pages
  • Articles and FAQ

Site Configuration

  • Users & Roles
  • Custom Fields & Metadata
  • Approvals
  • Mandatory Fields
  • File Attachments & Comments
  • Advanced Filter Options
  • Multicurrency Pricing
  • Multi-decimal Support
  • Configuring Reason Codes
  • Events and Webhooks
  • API Keys
  • Time Zone
  • Time Machine
  • Transfer Configurations
  • Articles and FAQ

Multi Business Entity

  • Multi Business Entity Overview
  • Customer Transfer Overview
  • Articles and FAQ

Mobile Subscriptions

  • Overview
  • Omnichannel Subscriptions
  • Omnichannel One-Time Orders
  • Mobile Subscriptions (Legacy)

Reports and Analytics

  • RevenueStory
  • Home Dashboard
  • Frequently Asked Questions
  • FAQs for Classic Reports Sunset
  • Articles and FAQ

Integrations

  • Sales
  • Customer Support and Success
  • Finance
  • Tax
  • eInvoicing
  • Marketing
  • Stitch
  • Collaboration
  • Contract Management
  • Ecommerce Management
  • Articles and FAQ

Data Privacy & Security

  • Two Factor Authentication
  • SAML Single Sign-On
  • System for Cross-Domain Identity Management (SCIM)
  • EU-GDPR
  • Consent Management
  • Personal Data Management
  • Compliance Certificates
  • HIPAA Guidelines
  • PCI Recommendations and Integration Types
  • Articles and FAQ

Data Operations

  • Bulk Operations
  • Migration
  • Articles and FAQ
  1. Billing
  3. Hosted Capabilities
  5. Articles and FAQ
  6. Portal V2 - Pop Up
  1. Billing
  3. Hosted Capabilities
  5. Articles and FAQ
  6. Portal V2 - Pop Up

How to edit font in checkout and self serve portal?

Problem Statement

You want to know how to edit font in checkout and self serve portal.

Solution

Scope

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

Summary:

Chargebee comes with several themes in the Legacy Product Catalog 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 Latest Product Catalog, 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

image

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.

image

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.

Related Articles

How to mark some fields as mandatory in Checkout?
I am trying to pass the MetaData parameter while updating subscriptions using API. However, the response does not have the metaData passed.
How to hide plans/addons in Chargebee's portal?

Was this article helpful?