How to import a Google font which has two words in the name?

A font can usually be added upon configuring themes under Settings (On the left-side panel) >> Configure Chargebee >> Checkout & Self-Serve Portal >> Hosted Pages Settings. You can add the preferred font under the Typography section. However, the same process cannot be followed to add a font whose name has two words. You will have to download and edit the theme file to include the font name and then import it back into Chargebee.

Example: Libre Franklin, Josefin Sans, Open Sans and so on.

Steps to be followed (Open Sans taken as an example here):

1. Download the theme at Settings (On the left-side panel) >> Configure Chargebee >> Checkout & Self-Serve Portal >> Hosted Pages Settings >> Themes >> Download (Your preferred theme under Published/Installed).

2. Unzip and edit "theme.css" file under Assets >> CSS. Look for google fonts import and replace the @import url with the below:

CODE:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

If you would like to have the option to use both Open Sans and Chargebee's default fonts, you can use the below code:

@import url(//fonts.googleapis.com/css?family=Open+Sans|{typography.google_font});

3. Once the changes are saved, you can upload the theme file back into Chargebee from Settings (On the left-side panel) >> Configure Chargebee >> Checkout & Self-Serve Portal >> Hosted Pages Settings >> Themes >> Upload.

Note: With the V3 checkout pages, the theme settings are not supported as the checkout happens in the form of a pop-up on the same webpage.