To add a custom font to your email, you can either add the font directly in your email design or use Custom Stationery. This article reviews how to add a custom font directly to a specific email design using inline styles. This is best for ad-hoc messages. If you need to apply a custom font to multiple email designs, or all parts of the message body, creating a Custom Stationery is much more scalable and will save you time: How to Create Custom Stationery.
Read on to learn how to add a custom font to your email message using inline styles.
Essentials to Get Started
- Familiarity with web design principles and some experience with HTML & CSS
- A link for your custom font
- A web-safe font to use as a fallback when your custom font cannot be viewed normally (this occurs in some email clients). Arial and Helvetica are common choices.
You are ready to apply your custom font AFTER you have finished creating your email content. We do not recommend making changes to inline styling if you are still creating content.
To apply your custom font, you will:
- Add a reference to the font via a URL (which is hosted somewhere in the WWW)
- Update the font styling in your message by editing the HTML for each element, usually via the Rich Text editor.
- Preview using test emails or a tool such as Litmus (not just the Preview tab).
Act-On's Email Composer is a WYSIWYG editor.
Why is this important?
Making changes to Rich Text Blocks and other WYSIWYG elements will cause the underlying HTML to shift, including inline styles. Because of this, we recommend that you change your font styles via the HTML code only after you have finished adding all of your email content. The WYSIWYG editor may inadvertently change your inline styles if you add new content to an existing Rich Text Block, for example.
Step 1: Add the custom font to your email
- From the Email Composer, go to Design.
- On the right side, expand Content.
- Drag-and-drop a Custom Content block into your message.
- Hover over the block and select the Pencil icon to edit.
- Add code to reference the font you are calling (e.g., Roboto). Depending on how you have designed the rest of your email, you can use an Embed Code or an @import link in a stylesheet:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
- Embed Code
- Click OK.
Step 2: Apply font styling
Rich Text Block
Open your Rich Text Block. Click on the code icon to access the HTML for the block.
Copy and paste your font-family property into the style attribute for each text element.
In this example, we use inline styling and Helvetica as a fallback:
<p style="font-family: Roboto, Helvetica, sans-serif;">This text will display as Roboto, a custom font.</p>
Other Content Blocks
Custom style in the Email Composer is not available for certain content blocks.
You can update these content blocks by editing their original source:
Update the inline styling for your header in the Rich Text editor by going to Content > Email Headers.
See also How to Create Custom Email Headers
Update the inline styling for your footer in the Rich Text editor by going to Content > Email Footers.
See also How to Create Custom Email Headers
Update the inline styling for your Signatures in the Rich Text editor by going to Content > Signatures.
You won't be able to change the font for some blocks in the WYSIWYG editor. However, their fonts can be updated when using Custom Stationery and updating the default fonts for your message:
- Media File Download
- Form Link
- Time & Place
- Multiple Choice
- Business Card
- Social Share
Step 3: Preview in a Test Message
The Design and Review tabs of our Email Composer may not show your custom font properly, so we do not recommend relying on our message preview for this type of customization.
To preview your message with a custom font, send test emails to ensure that everything looks correct before you send. You may also use a tool such as Litmus, which you can integrate with Act-On.
If you aren't sure how to do this, see How to Send a Test Email Message.
Here is a step-by-step example:
How do I get a custom font?
There are two ways that you can obtain a custom web font to use in your marketing emails:
Use your Company's existing Custom Font.
- Most companies that use a custom font have a licensed copy uploaded on their main website.
- Ask your Web Administrator, Web Designer, or another person who has authority to provide this to you.
- They will probably provide you with a simple link. You will also need to write some code to apply to your email. We provide some basic examples of this in our instructions above.
- Use a Free or Licensed web font.
What is a web-safe font, and why do I need one?
Web-safe fonts are fonts that are globally available and therefore "safer" to use.
- Some web browsers and networks will block the external URLs or otherwise disallow custom fonts from displaying.
- Web fonts only work in some email clients. There is a table here that details the email clients that do and do not work with them.
To control your brand and how your email displays, it is best to choose a web-safe font that acts as a fallback when your own custom font is blocked from display.
To add a web-safe font to your font-family property: specify your custom font first, then the fallback web-safe font, and end with the generic font family as the final fallback.
<p style="font-family: My Custom Font, Fallback Font, sans-serif">My paragraph.</p>