Before you start
Things you need to know:
Web fonts cannot be added to your account
Web fonts must be manually coded into individual email templates or campaigns. They then appear in the Font selection dropdown menu.
Web fonts have limited support in email
Web fonts do not display in Outlook for Windows, most webmail clients, including Gmail, and other email clients where web fonts are not supported.
Email-safe fallback fonts must be added
Email-safe fallback fonts must be used for Outlook-specific emails to stop the text defaulting to Times New Roman in some versions of Outlook on Windows. These Outlook-specific fonts display in Outlook on Windows regardless of the selected font in the EasyEditor.
Code weight and clipping
Adding web fonts and email-safe fallback fonts can increase the code weight of the campaign. This can increase the risk of Gmail clipping longer campaigns.
Fallback font weight and size
If the weight and size of the characters in the web font is different to the fallback font, it can cause template layout issues such as unexpected line breaks.
Buttons
Web fonts can't be added to EasyEditor buttons. This is because they can cause the button text to break in Outlook for Windows.
No support for custom web fonts
We are not able to troubleshoot or support any issues with custom web font display.
Supported fonts
The EasyEditor can support fonts from the following vendors:
Google - fonts are available for free from Google Fonts.
Adobe - you need to generate and provide the font embed code from your Adobe account.
Learn more in the Adobe article Using web fonts in HTML email or newsletters.
Other web hosted fonts
Many font providers require you to have a specific license in order to use purchased fonts for email use. In Dotdigital, we don't have font-hosting facilities, but, if you're hosting your own fonts, there's a way to load them from your servers through the use of @font-face.
However, this is usually prohibited by the CORS policy that prevents the fonts from loading when imported from a different server. This policy is in place to protect licensed fonts from being stolen from websites.
For more information see Cross-Origin Resource Sharing (CORS).
We therefore recommend that if you need to use custom fonts, you use a similar Google font instead.
1. Add fallback fonts to EasyEditor
Create a new campaign and open the EasyEditor.
Expand the Utilities drop-down menu and select Edit source.
Copy and paste the following code inside the
<head></head>section of the EasyEditor code:
<!-- Outlook fallback font goes in mso code below: --><!--[if mso]><style type="text/css">body, table, td, h1, h2, h3, h4, h5, p {font-family: Arial, sans-serif !important;}</style><![endif]--><!-- web font code goes in mso code below: --><!--[if !mso]><!--><!--<![endif]-->This code first includes a section where you must enter the fallback font style for Outlook.
You must add email-safe fonts such as Arial or Georgia. The font stack must always end with the generic serif or sans-serif. If you don't add email-safe fallbacks, some versions of Outlook on Windows fall back to using Times New Roman.
2. Add web fonts to EasyEditor
Copy and paste the link code for your chosen font between:
<!-- web font code goes in mso code below: --><!--[if !mso]><!-->
and
<!--<![endif]-->
Select SAVE to save the campaign with the font in the EasyEditor.
To return to the EasyEditor design page, select EDIT DESIGN.
If you're using Google fonts, the font is added to the campaign and can be accessed from the font face drop-down menu like any other font.
If you're using an Adobe font, you must add the font name to the following CSS rule in the source code of your campaign:
body, td {font-family:
birthstone, Arial, sans-serif;
}You must enter the font name in exactly the same way as it appears when you generate the @import code from your Adobe Creative Cloud account.