How can I use webfonts in my emails?
Overview
Webfonts are fonts loaded directly from the internet. They help you unify the appearance of your emails and your website.
The Email Templates Comfort and Premium allow you to integrate custom webfonts.
Webfonts are not supported by all email clients
You can find a detailed guide on webfont support in this Litmus article.
How to embed webfonts
1. Select a font
Choose a webfont provider such as Google Fonts or Adobe Fonts. Search for your desired font/font styles and view the embedding code. Use the @import directive:
Copy the highlighted code section to your clipboard.
Alternatively, you can embed webfonts directly from your server.
For this, the CORS header must be enabled for your redirect domain. The fonts must be provided in the Woff2 format.
2. Use webfont in mailing or branding content
In the next step, add the selected code to the branding - either in the branding setup of the mailing or in the branding content (Menu: Modules / Contents). Open the branding and go to the section "Fonts and font sizes".
Input "CSS - embed webfonts here": Paste the copied source code (with the @import syntax) here:
Input "CSS": Here you can specify the fonts and font styles for specific elements in your mailing. Add the font name in single quotes to the "font-family" attribute.
Examples:
- .font: sets the font stack for the entire email.
- .h1, .h2, .h3 set the font stack for the respective headlines.
If you made the adjustment in the branding content, you need to reload the branding in your mailings for it to become visible.
Support
Contact us if you have questions about this topic.