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.
  
  

Instructions

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

Step 1: Add the custom font to your email

1. From the Email Composer, go to Design.
2. On the right side, expand Content.
3. Drag-and-drop a Custom Content block into your message.
4. Hover over the block and select the Pencil icon to edit.
5. 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:
   • Embed Code
     

     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

   • @import link
     

     <style>
     @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
     </style>

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

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:

• Greeting
• 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.

Example

Here is a step-by-step example: 

FAQs

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.
  • Google, Adobe, and many other sources publish web fonts you can either use for free or licensed permission.
  • Sources like these often provide the font link and the code you can use to embed the font in your email, so it is as easy as copy-paste.
    
    

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.

Best Web Safe Fonts for HTML and CSS

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>