Add fonts to your HubSpot marketing email
Font field HubSpot provided in the DND editor.
In the DND email editor, we find many elements in the content tab which we can easily drag and drop into the email. Using the design tab you can play with the template global styles, buttons, dividers, and text styles.
Using the text styles options you can select the font for the emails, there are limited fonts but they show on platforms including Outlook because HubSpot is very smart, it only provides Email-safe fonts in the font field for the email.
How you can go for the custom fonts.
You can add custom fonts to your email using HubSpot's custom-coded email, please note for understanding the next part of this blog post, we assume that you have basic coding knowledge.
Steps.
- Go to your design manager.
- Click on the new file.
- Select HTML + HubL.
- Select the email template.
When you are in the HTML + HubL template you will see a body module that is for the email body text and then there should be a footer and header too. You need to find the styles tag in the head of the custom-coded email template.
You will see the tags in the head which are for the custom CSS, this is a place where you add your script to import fonts. Some email clients like Outlook do not support Web-safe fonts. In that case, you need to add a fallback font for the outlooks.
Using if/else, you can target Outlook specifically to use a websafe fallback font by creating a custom style sheet. The preferred location is after the style sheet you use to target all email clients since the last style listed is the one that gets used. If your email calls for a Webfont like Gotham or Lato, this style sheet will direct Outlook to use Arial or a sans-serif font:
Here's a code to show fallback fonts for Outlook.
<head>
<style type="text/css>
css for email clients
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body, table, td, a, h1, p {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
</head>
We suggest you use Email-safe. By using them in your emails there will be less chance of font support issues. Here is the list of email-safe fonts and you will also find them in the HubSpot DND email font field.
- Arial
- Courier
- New Georgia
- Lucida Sans Unicode
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
