Add custom fonts to your email
Last updated: January 11, 2021
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.
Related content
-
Set up email subscription types
Subscription types represent the lawful basis to communicate with your contacts through email. Contacts can ...
Knowledge Base -
Create marketing emails in the drag and drop email editor
HubSpot's drag and drop email editor provides an intuitive interface to scale your email marketing efforts...
Knowledge Base -
Add smart content to your emails, website pages, landing pages, and templates
With smart content, a module can display different versions of your content based on certain viewer criteria.
Knowledge Base