How to Use Custom Fonts

How to Add Custom Fonts To an Engage

Engages can be configured to use any custom font that is available on the publisher's site.

  1. In your Admiral dashboard, navigate to the Journeys page.
  2. Click on a Journey and select Edit.
  3. Select the Engage you would like to add Custom Fonts to. Click Edit.
  4. Navigate to the Styles section of the Engage designer.
  5. Under Styles, there are editable subsections. Click on a subsection to open it and see the edit options available.
  6.  In the Typefaces field, add the Custom Font names you would like to use. You can pass multiple fonts by using a “,” separator.

When adding Custom Fonts to the Engage designer, you may not see the Custom Fonts reflected in the designer itself. 

This is because the Admiral dashboard does not load ALL custom fonts on the internet. So those fonts are expected to not display in the designer.

To preview Custom Fonts and confirm they will display as expected, it is recommended that publishers use the Preview Link feature to view the Engage on the publisher site.

As long as the Custom Font is available on the publisher site, then it will be available for use when the Engage displays on the site.

7.   Once your Custom Fonts have been added, test to confirm the fonts are being set by using a Preview Link.

You should be able to visually see the font applied. You can confirm what is getting set by reviewing the applied CSS properties.

You have now successfully added Custom Fonts to an Engage!