Add custom fonts to your email

Last updated: January 11, 2021

Applies to:

Custom fonts aren't supported in most popular email clients. It's a best practice to use default web fonts in your emails to ensure a consistent experience for your readers. You can select standard web fonts for your marketing emails in your settings.

@font-face and @import are only supported in Apple Mail and a few other email clients. You can add @font-face and @import to the <head> section of custom coded HTML templates.

Please note: adding a custom font to the <head> HTML of a coded email template requires basic HTML knowledge. Coded templates are not supported in the drag and drop email editor.

To add a custom font to your coded template:

In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
In the finder, click the name of your coded template to open it in the editor. Or create a new coded template.
Copy and paste this code snippet into the <head> section of your HTML code between the <style> tags, replacing the font-family and source URL with your font of choice:
```
<style>
@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
}
</style>
```

Reference the font in the body of your email:

<span style="font-family: DeliciousRoman;">Describe what you have to offer the customer.</span>

Complete any other edits to your email template, then click Publish changes.

Please note: while Google Fonts are available in custom module font fields, Google Fonts cannot be used for email. This is because custom fonts are widely unsupported in email clients. Instead, only the default system fonts will be available in your custom module.

Add custom fonts to your email

Applies to:

Related content

Set up email subscription types

Create marketing emails in the drag and drop email editor

Add smart content to your emails, website pages, landing pages, and templates