Custom Font Management
Add your custom fonts through the Sailthru UI and keep your visual templates on-brand.
To locate your custom fonts, navigate to the Custom Fonts page from the My Account menu (My Account > Settings > Custom Fonts). When the page loads, you’ll see a list of your fonts. If you had custom fonts added manually in the past, they should appear in the list on the Custom Font page.
From the Custom Fonts page, you can add a new font, search for existing fonts, activate or deactivate fonts, edit a font entry, or delete a font. The page also gives you basic information for each font added.
|Name||The name given to the font when added.|
|Sample||A sample of the font.|
|Font Stack||The custom font and any backup fonts you added.|
|URL||The public link for the added font.|
|Active||A toggle to activate or deactivate the font.|
|Actions||The tools to edit or delete a font entry:
Note: If you delete a font, it will still show in existing templates. To use a different font, you will need to go into the templates and change it manually.
Public Font Links
Before adding a custom font, you need the public link to the font. This section covers finding the public font link in Google Fonts and in Typescript, since those two are the most commonly used.
Note: You must use the public link for a font. If you try to add a font and see a CORS error, contact your IT department to have the font link made public.
- From https://fonts.google.com/, search for and select the font you’d like to use.
- On the font page, under Styles, select Select this style. This will open more information in the Selected family panel to the right.
- Locate the link under Use on the web. Select the link from the href= section.
It should resemble the following:
Use new fonts
- While searching for a font, click the </> icon on the font you’d like to use.
- Add the font to an existing project or create a new one.
- Copy the URL inside the href field to grab the CSS file.
Use fonts from an existing project
- Go to Web Projects and find the list of fonts you’d like to use.
- Copy the URL inside the href field for the project to grab the CSS file.
Add a Font in Sailthru
To add a custom font, navigate to the Custom Fonts page from the My Account menu (Settings > Setup > Custom Fonts).
- Select the Add New Font button to open the Add Font modal.
- Give your font a name. This doesn’t need to be the formal font name; it can be anything.
- Paste the public link you copied in Getting Started into the URL field.
- The Font Family dropdown will populate automatically after clicking out of the URL field. Check the dropdown and select the correct font.
- Add a safe font (for example, Arial) or a font type (sans-serif, cursive, etc.) to the Font Backups field. This will give Sailthru a fallback font if your selected font doesn’t load.
- Select Add Font. Your font should show in the list and be available in Email Composer.
Edit a Font Entry
From the Custom Fonts page, locate the font you wish to edit.
- Select the pencil icon under Actions to open the Edit Font modal.
- Make edits to any of the fields.
- Select Save.
Use a Custom Font
Use custom fonts in Email Composer templates. To use a custom font:
- Open an existing template or create a new one.
- Add a block to your template that contains text or select the text in an existing block.
- Depending on the type of block selected, you’ll find custom fonts in the following areas:
- Title block
Custom fonts are available in the Content Properties panel under Font family. It will show the custom name for the font.
- Text block
Custom fonts are available in the floating editor. While scrolling through the fonts, you’ll see a sample of the font in the editor.
- Title block
- To set a custom font as the default, select the Settings tab. Select the font from the Default font dropdown menu:
While adding a custom font, you may see an error message. These are the most common errors you may see:
An error occurred while retrieving resources. For further information, details can be viewed in your browser’s console. Please contact your IT team to resolve this issue.
A CORS issue occurs when the link you provide isn’t a public font link.
The URL provided is not supported. Please provide a URL to a CSS file.
The link provided doesn’t point to a CSS file. Find the public CSS link for your font.
Duplicate font family
Duplicate font families are not supported. Please select a different font family.
Some fonts failed
Some fonts could not be retrieved from the URL provided. Please review the files provided in the URL.
Some of the fonts didn’t load properly. You’ll see the ones that did load in the dropdown.
Duplicate display name
A font with this name already exists. Please use a different name.
Enter a different name into the Name field.
The font name added to the Name field must be between 1-50 characters long.