Skip to main content
Custom Fonts in Listrak Composer

Learn more about custom fonts in Listrak Composer.

Support avatar
Written by Support
Updated over a year ago

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

  • Price: Free and Paid (More Info)

  • Popular Fonts: Proxima Nova, Futura PT, Museo Sans, Museo Slab, Adelle, Brandon Grotesque, Nimbus Sans, Myriad Pro, Freight Sans Pro

  • Implementation: Click here for the User Guide. 

Account Setup

Follow the steps below to set up an Adobe Fonts account and add the font to Listrak.

  1. Setup an Adobe account here or login to an existing account.

  2. Click Browse Fonts to browse available fonts to add.

  3. Select the font and click </> Add to Web Project.

  4. Name your project. ex: Font-Bold

  5. Check/uncheck until one font weight is selected. (You will need to create multiple projects per font weight.)

  6. Click Done.

  7. Once you have created a project(s) navigate to My Adobe Fonts.

  8. Click the Web Projects tab. There you will find the created Web Project(s)

  9. Copy the Project ID and font stack or reference this page when adding the font to Listrak's Font Manager.


TYPOGRAPHY.COM

  • Price: Paid (More Info).

  • Popular Fonts: Gotham, Whitney, Didot, Ideal Sans, Mercury, Verlag, Chronicle, Gotham Rounded, and Forza.

  • Implementation: Click here for the User Guide. 

Account Setup

Follow the steps below to set up a Typography account and add the font to Listrak.

  1. Set up a typography.com account here or login to an existing account.

  2. Create a new project from the Cloud Dashboard.
    If you already have an account with a published project, skip to step 9.

  3. Add a domain. Enter your site URL during setup. Other domains will need to be added later.

  4. Select the font(s) to add to the project.

  5. Select Project Mode and Publish this project to your server. (Setup Guide)

  6. 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.

  7. 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/Fonts

  8. Download the webfonts zip file, extract, and upload to the appropriate folder. Make sure to include the provided numbered folder. Confirm Your Installation.

  9. Add the domain *.listrak.com to enable access to the font in the Listrak application.

  10. Navigate to Tools. Then Email Campaigns.

  11. Check the box to enable this project for use in email campaigns.

  12. Send the CSS key to your Listrak representative.
    <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/XXXXXXX/XXXXXX/css/fonts.css" />

  13. Copy the CSS styling for each font including: font family, font style, and font weight, along with any suggested fallback fonts.

  14. Add to Listrak using the Font Manager.


CUSTOM FONTS

  1. Download font(s) from an applicable provider (only TTF, WOFF, WOFF2 file types are supported in the Font Manager).

  2. 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

Did this answer your question?