When working in the Drag and Drop (DND) email editor in HubSpot, you’ll notice a range of content elements in the Content tab that you can easily drag and drop to build your email layout.
The Design tab lets you adjust global styles — such as buttons, dividers, and text — giving your template a polished and consistent look.
HubSpot only includes email-safe fonts in the DND editor’s font field. This is intentional — email-safe fonts are supported across major email clients, including Outlook, ensuring your email design stays consistent for every subscriber.
If you want to use a custom font (like Gotham or Lato), you’ll need to work with a custom-coded email template. For this part, we assume you have a basic understanding of HTML and CSS.
<style> tag inside the <head> section.@import or a link to a hosted font.Example:
<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>
Some email clients (especially Outlook) don’t support web fonts. By using conditional comments, you can make sure those clients fall back to a safe font like Arial or another sans-serif option.
Place this conditional style sheet after your main styles — the last declared style will take precedence.
To avoid rendering issues, we always recommend using email-safe fonts. These are reliable, widely supported, and already available in the HubSpot DND email font field:
✅ Pro tip: Email-safe fonts help maintain consistent branding and improve readability across different email clients — without the hassle of rendering issues.