CATEGORY: Designs

Branding: How to add/manage custom fonts for use in Smart Editor

Smart Editor supports three types of fonts: standard fonts (such as Arial and Times New Roman), non-standard web fonts (such as Open Sans), and custom fonts that you upload and manage directly within e-shot. 

This article explains how to add a custom font, manage your font library, use custom fonts in your designs, and set up fallbacks for email clients that don't support them. 

 

Before you begin 

A short video walkthrough of this process is available if you prefer to follow along visually. You can find it below. 

 

 

The Branding page 

Navigate to Designs in the main menu, then select Branding. 

Here you will see a list of all the custom fonts you have added, along with a live preview of each one. This is also where you add new fonts. 

 

Adding a custom font 

Click the Add custom font button. An overlay will appear asking for three pieces of information: 

Font name: The display name for the font. We recommend using the font's real name (for example, "Amatic SC" rather than "Font1"). This makes it much easier to manage your library if it grows as well as when selecting it within the editor. 

Embed URL: The URL from your font provider's embed code. See the Google Fonts example below for guidance on where to find this. 

Font family: The font-family allows you to set fallbacks on your custom fonts. Typically it is advised to fall back to Arial should your font not be supported. 

 

Example — Adding a Google Font (Amatic SC) 

The following steps walk through adding Amatic SC from Google Fonts. The same process applies to any Google Font. 

1. Visit fonts.google.com and search for your chosen font. 

2. Open the font family page and click Get font, then Get embed code. 

3. Select the @import tab. Copy the URL from inside the url(...) value — this is your Embed URL. 

4. Note the font-family value shown in the CSS rules panel (for example, 'Amatic SC'). 

5. Return to e-shot™ and open the Add custom font overlay. Enter the font name, paste in the embed URL, and enter the font-family string. 

6. If you want to use the font straight away, tick Enable before saving. 

Once saved, the font will appear on the Branding page with a live preview as to what you can expect the font to look like. 

 

Managing your font library 

Fonts are listed alphabetically on the Branding page. From this list you can: 

• Edit: update the font name, embed URL, or font-family string. 

• Enable / Disable: control which fonts are available in Smart Editor for use in your email designs. 

• Delete: permanently remove a font from your library. 

 

Using custom fonts in the Smart Editor 

When editing a design, your custom fonts are available via the font selector in both the top toolbar and the side panel. Select the text you want to change, then choose your font from the dropdown, it will appear alongside the standard and web font options. 

Once chosen, your text will update to your selected font.  

Don't forget about fallbacks 

Custom fonts are a great way to reinforce your brand identity, but not all email clients support them. It is important to set up a suitable fallback, so your email still looks good wherever it lands. 

Which email clients support custom fonts? 

The following clients currently render custom fonts correctly: 

• Apple Mail 

• iOS Mail 

• Samsung Mail 

• Outlook.com 

Other clients, including most versions of desktop Outlook, will fall back to a system font instead. 

Choosing a good fallback 

Always define a font stack that includes one or more standard system fonts. The key thing to bear in mind is that your fallback should occupy a similar amount of space to your custom font, if it is significantly wider or narrower, it may disrupt your layout for readers using unsupported clients. Arial is always a safe bet. 

Test, test and test again

As always, it is worth sending test emails to a range of different email clients, including a desktop Outlook account, before deploying your custom font in live campaigns, to make sure the design holds up with the fallback font active.