Font Customization

You can customize the list of fonts available in the visual editor’s text toolbar and the BODY settings panel. This feature allows the users of your app to:

Expand the list of available fonts, adding web fonts from popular services, such as Google Fonts, http://fontlibrary.org, or alike.
Reduce the list of fonts to a limited number of options, removing some or all our default fonts.

Request Adding a Custom Font

In order to add/remove custom fonts in your account, you can log a support request through your account manager with the following information:

Specify a Font Name

This is the name of the custom font that you’d like to be added to your account, as it will appear in the visual editor's font selector. For example, you might want to use a custom font called Bai Jamjuree.

Provide a Font Stack

which is the value to use for your template's font-family CSS attribute. It should specify the custom font name, and can also include fallback fonts and font types.

For example, for a custom font from the family Bai Jamjuree, you might use the following font stack: 'Bai Jamjuree', Arial, sans-serif. This font stack attempts to use Bai Jamjuree and then falls back to Arial or sans serif fonts as necessary.

Tip: For a fallback font, do not use custom font. Instead, use a web-safe font such as Arial, Courier, Georgia, Helvetica, Lucida Sans, Tahoma, Times New Roman, Trebuchet MS or Verdana.

Provide Font Weights

When requesting for a custom font to be added in the Visual Editor, it will have Regular and Bold font weights by default, to add more to these options, you need to specify the font weight values and the name for each font weight. For example:

CODE

"200": "Extra-light",
"300": "Light",
"400": "Regular",
"500": "Medium",
"600": "Semi-bold",
"700": "Bold"

Font weights are only available for Title, Paragraph, List, and Button content blocks

Provide Font CSS URL

This URL should point to a CSS file that specifies details about the custom font.

This must be an HTTPS URL, and the file it references should reside on a CORS-enabled server (also see the W3C documentation about CORS and web fonts).

A font CSS file can be hosted by a tool such as Google Fonts or on your own servers. For example, Google Fonts provides the following link to a CSS file for the Bai Jamjuree font (in this example, only the Extra Light 200 style has been selected for the font):

https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200&display=swap

To get this URL from Google Fonts: select a font, choose the styles you need, open the Embed tab, and select the value of the href attribute in the provided <link>. For example:

Considerations for Content Created Prior to June 1, 2021

Please note that any change to custom font settings will not apply to content (campaigns, templates, or visual snippets) created prior to June 1, 2021.

Furthermore, custom font settings will not be applied to content that is created by duplicating content which was created prior to June 1, 2021. Therefore, to ensure that your new custom fonts work comprehensively, we recommend creating new content from a blank template, i.e. start from scratch.