Add a Custom Font to an Email - Legacy Composer

  • Updated

You can add a custom font to an individual email by applying inline CSS. This approach works well for one-off messages. If you need to apply the same custom font across multiple email designs, or across all elements of the message body, consider using Custom Stationery instead: How to Create Custom Stationery.

Follow the steps below to add a custom font to a specific email using inline styles.

Quick Reference (Advanced Users) – Click to Expand
  • Insert a Custom Content block and add a font reference (<link> or @import).
  • Edit the HTML of each Rich Text block and apply inline font-family styling.
  • Use a web-safe fallback font (e.g. Arial, Helvetica).
  • Send test emails — previews may not display custom fonts accurately.
  • Use Custom Stationery for broader or repeated font usage.
Try it like this: Embed the custom font link in a Custom Content block, then open each Rich Text block and add font-family: MyFont, Helvetica, sans-serif; to your paragraph tags. Send a test message to confirm how the font renders in different email clients.

Essentials to Get Started

  • Basic understanding of HTML and CSS.
  • A hosted font URL (from your company or a font provider such as Google Fonts).
  • A web-safe fallback font for email clients that cannot load custom fonts.

Instructions

Apply your custom font only after your email content is complete. Updating the WYSIWYG content later may overwrite or modify inline styling.

You will:

  • Add a reference to the custom font.
  • Apply inline font-family styling to each necessary element.
  • Test your message in a real inbox or with a tool like Litmus.
About the Legacy Email Composer
The Legacy Email Composer uses a WYSIWYG editor. Editing text later may shift or overwrite inline HTML and styles. For best results, make your inline style changes only after all content is final.

Step 1: Add the custom font to your email

  1. In the Email Composer, go to Design.
  2. Open the Content panel on the right.
  3. Drag a Custom Content block into your message.
  4. Hover over the block and click the Pencil icon to edit.
  5. Add a reference to your custom font. You may use either an Embed URL or an @import statement:

    • 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 and click the Code icon to access the HTML.

Apply your font using inline styles on each text element:

<p style="font-family: Roboto, Helvetica, sans-serif;">
This text will display using Roboto.
</p>

Other Content Blocks

Some elements do not allow inline styling in the main editor. Update these items by editing their source components:

Header Update the inline styling via Content > Email Headers.
See also How to Create Custom Email Headers.
Footer Update the footer font via Content > Email Footers.
See also How to Create Custom Email Footers.
Signature Update signature styling via Content > Signatures.
See also How to Create and Use Email Signatures.

Some block types cannot be edited directly for font styling, but they can inherit fonts defined in Custom Stationery:

  • Greeting
  • Media File Download
  • Form Link
  • Time & Place
  • Multiple Choice
  • Business Card
  • Social Share

Step 3: Preview in a Test Message

The Preview and Review tabs may not display your custom font correctly. Always send a test email to verify how the font appears in real email clients.

You may also use a tool such as Litmus: Integrate Litmus with Act-On.

For instructions on sending test messages: How to Send a Test Email Message.

FAQs

How do I get a custom font?

You can obtain a web font in two main ways:

  • Use your company’s licensed custom font.
    • Many organisations host their licensed fonts on their main website.
    • Ask your Web Administrator or Designer for the correct link.
    • Apply it using the examples in the instructions above.
  • Use a free or licensed web font.
    • Providers such as Google Fonts or Adobe Fonts host fonts with ready-to-use embed code.
    • Most providers include copy-and-paste examples for email use.

What is a web-safe font, and why do I need one?

A web-safe font is widely supported across browsers and devices. Since many email clients block custom fonts, your fallback font ensures the message remains readable.

  • Some browsers or networks block external font URLs.
  • Many email clients do not support embedded web fonts. See compatibility: The Ultimate Guide to Web Fonts.

It is best practice to include a web-safe fallback in your font-family declaration:

<p style="font-family: My Custom Font, Fallback Font, sans-serif;">
My paragraph.
</p>

Was this article helpful?

Have more questions? Submit a request