Stay on-brand and take your email design to the next level with the ability to easily add your own fonts to Listrak Composer from Google Fonts, Typography.com, Adobe Fonts, or upload a custom font. Now you can easily add or edit your portfolio of fonts using Listrak's Font Manager.

Access the Font Manager by following the below steps.

  1. Navigate from the home menu to Authoring.
  2. Go to Content and Media.
  3. Then Font Manager.

You will land on the Font Manager dashboard, where you'll see an at-a-glance view of your fonts, their service, and styles.

ADD A NEW FONT

1. Click New Font in the upper right-hand corner.

2. Select a new font (Google, Typography, Adobe Fonts, or Custom).

Depending on which font you select in step two, be sure to follow the specific instructions for each font type outlined here. These instructions walk through the steps that are required to set up accounts with each of these font services and the applicable information that is needed from each. Be sure to follow the steps outlined to seamlessly add them into the Font Manager. 

GOOGLE FONTS

1. Search for the applicable Google Font.
2. Select the applicable font weights (regular and bold). Create many different font variations using different weights.
3. Click the checkbox to include italic styles.

  • NOTE: Including italic styles increases the file size and load time. 

4. Update the fallback fonts, if applicable. Be sure the first font in the stack is the font family you're adding.
5. Click Add Font.

  • NOTE: Some of the above styling options may vary based on the Google Font that's selected.

TIP: To add a variation of a font style or weight, see custom fonts.

ADOBE FONTS

1. Enter the Project ID.
2. Enter a Font Name.
3. Add the font family as the first font in your stack.
4. Update the fallback fonts, if applicable.
5. Click Add Font.

TIP: When setting up your project, ONLY select the font weights and styles that you intend to use for regular, regular italic, bold, and bold italic. These are the only weight and style controls available in Composer text components. To set up more weights and styles, create another project and select the alternate weights. Then, create a new font in Listrak's Font Manager with a new name.

TYPOGRAPHY.COM

1. Enter the CSS Key URL

  • NOTE: Only enter the URL of the CSS Key, not the entire <link> key. Please use the key format of: 1234/5678/css/fonts.css.

2. Enter a Font Name.
3. Add the font family as the first font in your stack.
4. Update the fallback fonts, if applicable.
5. Click Add Font.

CUSTOM FONTS

  1. Select a Font to upload.
  2. Enter a Font Name.
  3. Enter the Font Weight and select Italic if applicable.
  4. Update the fallback fonts, if applicable. Be sure the first font in the stack is the font family you're adding.
  5. Click Add Font.

PRO TIPS

  • Be sure to use True Type Font (TTF) or Web Open Font Format (WOFF) fonts for the best browser support.
  • Many popular fonts have already been added to your account by default. No further action is required to use these fonts.
  • You can not delete a font. This prevents deleting a font when the font may be in use for a message.
  • After a font has been added, edit options are relative to the font. For example, edit the styling of a font.
  • You must have Author-level access to view the Font Manager. Learn more about Listrak's permission levels here.
  • Please do not include more than one space when naming fonts, as it may cause rendering issues and a fallback font may be used. For example, Arial Black (one space) vs. Arial  Black (two spaces).
  • Fonts that are created using the Font Manager are hosted within Listrak's Media Library. This is because the fonts are similar to images and are downloaded when an email is opened. Be sure to pay attention to the total media bandwidth of the messages you are sending.
  • Avoid using the naming convention Font Name 1, or any combination with numbers.
  • Adding multiple Google Fonts may increase load time. Learn more here.
  • Add multiple variations of a font by uploading each font file separately. For example, when using Roboto, create Roboto-Regular with a weight of 400. Then, create a second version of Roboto called Roboto-Light with a weight of 100. 
Did this answer your question?