Web fonts help to create a consistent design voice for your brand across all channels. Inbox market share and support for web fonts have grown to the level where it's worthwhile spicing up your emails with an emphasis on typography. Custom fonts can be added to your account for use in Composer. Integrations with the following font services are currently available:
GOOGLE FONTS
Learn more about Google Fonts here.
Price: Free.
Popular Fonts: Roboto, Open Sans, Lato, Oswald, Montserrat, Source Sans Pro, Raleway, PT Sans, Merriweather, Lora, Droid Sans, and Ubuntu.
Implementation: Add your Google Font using the Font Manager.
ADOBE FONTS
Account Setup
Follow the steps below to set up an Adobe Fonts account and add the font to Listrak.
Setup an Adobe account here or login to an existing account.
Click Browse Fonts to browse available fonts to add.
Select the font and click </> Add to Web Project.
Name your project. ex: Font-Bold
Check/uncheck until one font weight is selected. (You will need to create multiple projects per font weight.)
Click Done.
Once you have created a project(s) navigate to My Adobe Fonts.
Click the Web Projects tab. There you will find the created Web Project(s)
Copy the Project ID and font stack or reference this page when adding the font to Listrak's Font Manager.
TYPOGRAPHY.COM
Account Setup
Follow the steps below to set up a Typography account and add the font to Listrak.
Create a new project from the Cloud Dashboard.
If you already have an account with a published project, skip to step 9.Add a domain. Enter your site URL during setup. Other domains will need to be added later.
Select the font(s) to add to the project.
Select Project Mode and Publish this project to your server. (Setup Guide)
Fonts will need to be hosted on a publicly accessible web server. Enter the URL where the fonts will be uploaded. If you'd like to host the fonts in your Listrak Media Library, see step 7, otherwise skip to step 8.
Enter your branded media library URL found in Content > Content Media Library. We suggest creating a "Fonts" folder within the "Shared Media" folder in the Media Library.
Example: http://media.XXXX.net/XXXX/Shared/FontsDownload the webfonts zip file, extract, and upload to the appropriate folder. Make sure to include the provided numbered folder. Confirm Your Installation.
Add the domain *.listrak.com to enable access to the font in the Listrak application.
Navigate to Tools. Then Email Campaigns.
Check the box to enable this project for use in email campaigns.
Send the CSS key to your Listrak representative.
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/XXXXXXX/XXXXXX/css/fonts.css" />Copy the CSS styling for each font including: font family, font style, and font weight, along with any suggested fallback fonts.
Add to Listrak using the Font Manager.
CUSTOM FONTS
Download font(s) from an applicable provider (only TTF, WOFF, WOFF2 file types are supported in the Font Manager).
Add to Listrak using the Font Manager.
TIP: While custom fonts are supported by the Listrak platform, please consider that not all email inboxes support custom fonts. This means that some inboxes will show your custom font and others may not. Instead, fallback fonts will appear as you indicate them within the Font Manager.
For example, when using “Roboto”, Helvetica, Arial, sans-serif; the following will happen:
Roboto will appear in the inboxes that support custom fonts, like Apple Mail. However, in an inbox like Gmail, Roboto will not work and it will instead try to display Helvetica. If the person doesn’t have Helvetica installed, it will try Arial, and then ultimately it will display the computer’s default sans-serif font.
Please see all inboxes below:
INBOX | SUPPORT CUSTOM FONTS |
Apple Mail | Yes |
Outlook Desktop 2007-2016 | No |
Outlook for Mac | Yes |
Android Native App | Yes |
Gmail App - Android | No |
iOS Native App | Yes |
Gmail App - iOS | No |
Gmail | No |
Outlook.com | No |
Yahoo! Mail | No |