Web fonts let you use a wider range of typefaces in your email designs. You add one by editing the source code of a campaign or template, and it then appears in the font drop-down menu for that campaign or template.

Before you start

Read Use different fonts in EasyEditor to check that a web font is the right choice. Web fonts don't display in every email client, so a fallback font is always required.
Make sure you have:
- A link to your chosen font, from Google Fonts, Adobe Fonts, or your own server
- A campaign or template you can edit.

Limitations of web fonts

Web fonts must be added to each campaign or template
You can't add a web font to your account. Add it to an individual campaign or template by editing the source code.
Email-safe fallback fonts must be added
Without a fallback, text can default to Times New Roman in some versions of Outlook on Windows. Outlook-specific fonts display in Outlook on Windows regardless of the font selected in EasyEditor.
A fallback font changes your layout
If the fallback font's weight and size differ from the web font, your design can shift, causing problems such as unexpected line breaks.
Adding fonts increases your code weight
Web fonts and fallback fonts add code to your campaign, which increases the risk of Gmail clipping longer campaigns.

Web fonts don't display in every email client, and can't be used in EasyEditor buttons. Learn more in Use different fonts in EasyEditor.

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.

If your brand font isn't available from Google or Adobe, choose the closest match you can find from one of them. Fonts hosted anywhere else often fail to load, for the reasons described in the next section.

Learn more in the Adobe article Using web fonts in HTML email or newsletters.

Other web-hosted fonts

Many font providers require a specific licence to use a purchased font in email. Dotdigital doesn't host fonts. If you host your own, you can load them from your server using @font-face.

In practice this often fails. The CORS policy on the server the font is requested from usually prevents it loading, which protects licensed fonts from being taken from websites. This is outside our control, and we can't troubleshoot it.

If you need a font we don't list, we recommend using 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 the 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 between the two comments below: -->
<!--[if !mso]><!-->
<!--<![endif]-->

Select Save.

The first block in the code sets the fallback font for Outlook on Windows. Replace Arial with the email-safe font you want, such as 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 fall back to Times New Roman.

The second block in the code is empty. Your web font link goes between those two comments, as described in the next section.

Add web fonts to EasyEditor

To add a web font, paste its link into the campaign's source code, then choose the font in EasyEditor.

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.

Place your cursor in the <head> tag and paste the following conditional comments with the link to the font in between them:

<!-- web font code goes between the two comments below: -->
<!--[if !mso]><!-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia&display=swap" rel="stylesheet">
<!--<![endif]-->

Select Save to save the campaign with the font in the EasyEditor.
Select Edit design.
Select the text block you want to change, then choose your font from the Font face drop-down menu.

If you're using an Adobe font, you must also add the font name to this CSS rule in the source code of your campaign, for example:

body, td {
  font-family: birthstone, Arial, sans-serif;
}

Enter the font name exactly as it appears when you generate the @import code from your Adobe Creative Cloud account.

If your font doesn't appear

If your font isn't in the Font face drop-down menu after you save:

Check that you saved the campaign and then selected Edit design. The drop-down menu updates when the design reloads.
Check that the font link is inside the <head> section, between the  and  comments.
Check that you copied the whole embed code, including the <link> tags.
Check that the font is available from Google Fonts or Adobe Fonts. Commercial fonts licensed elsewhere aren't available from either.

A font that appears in EasyEditor can still display differently in an inbox. Send a test campaign before you send.

Add web fonts to email