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 will 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 will require you to have a specific license in order to use purchased fonts for email use. In Dotdigital, we do not have font hosting facilities but if you are hosting your own fonts there is 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 the Cross-Origin Resource Sharing (CORS). We therefore recommend that if custom fonts are a requirement, a suitably similar Google font is selected 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 between 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’ll need to add email-safe fonts such as Arial or Georgia. The font stack must always end with the generic serif or sans-serif. Failure to add email-safe fallbacks will mean some versions of Outlook on Windows will fall back to 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.
