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 navigating to Content > Content 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.
THINGS TO KEEP IN MIND BEFORE YOU START
You can not delete a font. This prevents deleting a font when the font may be in use for a message.
You must have Author-level access to view the Font Manager. Learn more about Listrak's permission levels here.
After a font has been added, edit options are limited to prevent rendering issues in existing messages using the font.
Many popular fonts have already been added to your account by default. No further action is required to use these fonts.
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.
To learn more about Google Fonts, Adobe Fonts, Typography.com or Custom Fonts, read the Custom Fonts in Listrak Composer article.
ADD A NEW FONT
Click New Font in the upper right-hand corner.
Select a new font (Google, Typography, Adobe Fonts, or Custom).
Find the section below that corresponds with the font you selected in step two for the instructions needed to seamlessly add them to the Font Manager.
⚠️ 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.
GOOGLE FONTS
Search for the applicable Google Font.
Select the applicable font weights (regular and bold). Create many different font variations using different weights.
Click the checkbox to include italic styles, when applicable.
Update the fallback fonts, if applicable. Be sure the first font in the stack is the font family you're adding.
Click Add Font.
TIPS:
Including italic styles increases the file size and load time.
Some of the above styling options may vary based on the Google Font that's selected.
To add a variation of a font style or weight, see custom fonts below.
Adding multiple Google Fonts to one message may increase load time. Learn more here.
ADOBE FONTS
Enter the Project ID.
Enter a Font Name. (ex: FuturaPt-Book)
Add the font family as the first font in your stack.
Update the fallback fonts, if applicable. Be sure the first font in the stack is the font family you're adding.
Click Add Font.
TIPS:
Enter the font family exactly as shown in the font stack located in your web project. (ex: font-family: futura-pt, sans-serif; Please use: futura-pt)
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
Enter the CSS Key URL. Only enter the URL of the CSS Key, not the entire <link> key. Please use the key format of: 1234/5678/css/fonts.css.
Enter a Font Name. (ex: FuturaPt-Book)
Add the font family as the first font in your stack.
Update the fallback fonts, if applicable. Be sure the first font in the stack is the font family you're adding.
Click Add Font.
TIP: Enter the font family exactly as shown in the font stack located in your web project here. (ex: font-family: futura-pt, sans-serif; Please use: futura-pt)
CUSTOM FONTS
Select a Font to upload. (must be TTF, WOFF, or WOFF2).
Enter a Font Name. (ex: FuturaPT-Book)
Enter the Font Weight and select Italic if applicable.
Update the fallback fonts, if applicable. Be sure the first font in the stack is the font family you're adding.
Click Add Font.
DISTINGUISHING FONT WEIGHTS
Thin/Hairline = 100
Extra Light/Ultra Light = 200
Light = 300
Regular/Normal = 400
Medium = 500
Semi-Bold/Demi-Bold = 600
Bold = 700
Extra Bold/Ultra Bold = 800
Black/Heavy = 900
TIP: 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.