When building your own HTML Email Design System, you might want to incorporate a custom font instead of relying solely on standard options. If your brand guidelines require a specific font, it’s crucial to pair it with a reliable fallback to ensure consistency across all email clients.
The first consideration to take into account when working with custom fonts is that email client support is patchy. The following email clients support custom fonts:
Defining a font stack is essential when using custom fonts. Be sure to include common system fonts to ensure proper email rendering in clients that don’t support custom fonts.
‘OpenSansBold’, Helvetica, Arial, sans-serif
You have the option to host your custom fonts using a service like Google Fonts or by hosting them yourself. Additionally, we offer font hosting for our customers, provided you can provide proof of your license.
For situations where your custom fonts aren’t supported, you should select fallbacks that are included on the majority of computers. These fallbacks define what fonts will be displayed if the email client doesn’t support custom fonts.
The most reliable way to include a specific font into your email is to use @font-face. Below is an example of this in action:Â
<style> @font-face { font-family: ‘Festive’, cursive; src: url(‘https://fonts.googleapis.com/css2?family=Festive&display=swap’) }
* { font-family: ‘Festive’, cursive; }
</style>
When working with Outlook, we need to wrap this @font-face in a @media tag. This is because Outlook 2007, 2010 and 2017 don’t support them.
Steps to save an element or layout: Step 1 | Navigate to the Marketing -> Email Marketing and open any Campaign/ Template Step 2 | Design the layout or element you want to save. Step 3 | Hover over the element or layout and click on the “Save” icon Step 4| Access the element under […]
Enhance the visual harmony between your website and emails by incorporating Google Fonts. This feature allows for greater design flexibility, helping you create more polished and cohesive email content. Important Considerations Before Adding Google Fonts to Your Emails While Google Fonts can improve the consistency of your branding, keep in mind that not all email […]
Discover how to reconnect with customers who may have missed your initial campaign by strategically resending the same content to maximize engagement. Research indicates that a large number of emails go unnoticed, creating an opportunity to capture attention the second time around. However, it’s crucial to strike the right balance—too many repeat emails can lead […]
What is an Email Conversion? An email conversion occurs when a recipient opens your email and completes a desired action—such as purchasing the promoted product—within the designated conversion period, also known as the attribution window. How Does Email Conversion Tracking Work? The example provided below demonstrates the functioning of email attribution. Please note: this scenario […]
The conversion metric serves as a crucial indicator of how well your marketing efforts drive revenue. A key aspect of this metric is the attribution window, which defines the period during which a customer’s action is credited to a particular marketing interaction. Attribution Window Customization: Steps to Customize: Why 5 Days? Research suggests subscribers forget […]
Email Campaign now shines with a powerful new feature—showcasing your incredible products! Engage your audience like never before and leave a lasting impression. Including a product catalog in emails offers several key benefits: How to use Product Element in Email Campaigns? What does the future hold with Product Element?
How to use Advanced Conditions for Smart List? For Example, If a Smart List named Marketing has 100 contacts when the email campaign is scheduled for January 30th. And before the scheduled date, 30 more contacts get added to that Smart List: On January 30th, the Smart List named Marketing will now have 130 contacts. […]
To import an email template from ActiveCampaign, first, log in to your ActiveCampaign account before proceeding with this guide. After logging in, follow the instructions provided in the ActiveCampaign Help section. Overview: Importing of email third-party providers like Active Campaign which provides email campaigns and templates. Here’s how you can import email from Active Campaign: […]
How to Hide Elements for Mobile and Desktop view 1. After creating the Email Template or Campaign, navigate to the drag-and-drop email editor view. 2. Edit the element and on hover, it will show the action to hide it on mobile or desktop. Previewing and Testing the email 3. Save the Email template or campaign, […]