Web fonts allow you to use a wider range of typefaces in your email designs. You can add fonts from providers like Google or Adobe, or host your own. However, web fonts come with limitations, especially in email clients like Outlook, so fallback fonts are essential.
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 to use purchased fonts for email use. In Dotdigital, we don't have font-hosting, 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.
To learn more, see Cross-Origin Resource Sharing (CORS).
We therefore recommend that if you need to use custom fonts, you use a similar Google font instead.
Add fallback fonts to EasyEditor
Create a new campaign or edit an existing one.
Expand the Utilities drop-down menu and select Edit source.
Copy the following code and paste it 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]-->
Select SAVE to save the campaign.
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 fonts, some versions of Outlook on Windows fallback to using Times New Roman.
Add web fonts to EasyEditor
To add a web font, insert the font link and define the font style using HTML.
Create a new campaign or edit an existing one.
Expand the Utilities drop-down menu and select Edit source.
Copy the link to your chosen font, for example, from Google Fonts.
Paste the link between the following conditional comments:
<!-- web font code goes in mso code below: --><!--[if !mso]><!-->
and
<!--<![endif]-->
Select SAVE to save the campaign with the font in the EasyEditor.
The font is now available in the EasyEditor in the font dropdown.
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, for example:
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.
Add a hosted custom font
You can add a custom font to your campaign by linking to a hosted font and defining the font style in the HTML source.
This is useful if you want to use a font that’s not available in the standard EasyEditor font list. Once added, the font becomes available in the font dropdown for that campaign.
Before you start
Make sure you have:
A link to your hosted font, for example:
https://fonts.gstatic.com
https://fonts.googleapis.com/css2?family=Bitcount+Prop+Double:wght@100..900&family=Bitcount+Prop+Single:wght@100..900&family=DM+Serif+Text:ital@0;1&family=Sofia&display=swap
A style tag to define the font, for example:
<style>
body {
font-family: 'Sofia', sans-serif;
}
</style>
Add the font to your campaign
Create a new campaign or edit an existing one.
Expand the Utilities drop-down menu and select Edit source.
Find the
</style>tag in the HTML.Place your cursor between the
</style>and</head>tags.Paste the link to your hosted font.
Paste the style tag after the font link to define the font. For example:
</style>
<link relonts.gstatic.com
<link href="https://fonts.googleapis.com/css2?family=Bitcount+Prop+Double:wght@100..900&family=Bitcount+Prop+Single:wght@100..900&family=DM+Serif+Text:ital@0;1&&display=swap
<style>
body {
font-family: 'Sofia', sans-serif;
}
</style>
</head>Select SAVE.
The font is now available in the EasyEditor in the font dropdown.