You design email campaigns and email templates in EasyEditor. You also use EasyEditor for pages, surveys, and forms, so the steps in this article work for all of them.
A web font loads from a link provided by a font supplier, such as Google Fonts or Adobe Fonts, instead of from your reader’s device. Once you add one, it appears in the Font face drop-down menu with the standard fonts.
You add a web font to one email campaign, email template, page, survey, or form at a time. There’s no account-wide font setting. If a template includes a web font, campaigns you create from it include the font too.
Before you start
Read Use different fonts in EasyEditor to check that a web font is the right choice.
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.
Add fonts in EasyEditor
These steps use Google Fonts as an example. You can use a font from any supplier that gives you an embed link.
The process is the same: copy the font’s link code, then paste it into your source code.
If you use Adobe Fonts, there’s one extra step.
Learn more in the Use an Adobe font.
1. Copy your font code
Go to fonts.google.com and find your font.
Select Get font, then select Get embed code.
Under Web, copy the three lines of code that start with
<link.
You don’t need the CSS code that Google Fonts shows below the link code.
For example, the code for Bitcount Ink font looks like this:
<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=Bitcount+Ink:wght@100..900&display=swap" rel="stylesheet">
2. Add your code to the template
Copy this template. Then replace the middle line with the code you copied in step 1.
<!--[if !mso]><!-->
PASTE YOUR FONT CODE HERE
<!--<![endif]-->
The first and last lines stop Outlook for Windows from trying to load the font, because it can’t display web fonts. Use the same code for Pages, Surveys, and Forms.
Your finished code looks like this:
<!--[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=Bitcount+Ink:wght@100..900&display=swap" rel="stylesheet">
<!--<![endif]-->
3. Paste the code into your source code
Open your email campaign, email template, page, survey, or form in EasyEditor.
Expand the Utilities drop-down menu and select Edit source.
Find the
<head>tag near the top of the code.Place your cursor straight after
<head>and press Enter to start a new line.Paste your finished code.
Select Save.
4. Apply the font to your text
Select Edit design.
Select the text block you want to change.
Expand the Font face drop-down menu and choose your font.
The font name matches its name on Google Fonts. To use the font in every text block at once, change it in your text styles instead.
Learn more in Create text styles in EasyEditor.
Where your web font displays
Not every email client can show web fonts. Where a web font can’t load, a fallback font shows instead.
Where | Shows your web font? | What shows instead |
Pages and surveys in a web browser | Yes | – |
Apple Mail | Yes | – |
Gmail and most other webmail clients | No | Fallback font |
Outlook for Windows | No | Your Outlook fallback font, or Times New Roman if you haven’t set one |
Buttons in email campaigns | No | A web-safe font |
We recommend sending a test campaign to more than one email client before you send to your customers, because each client displays fonts differently.
Set a fallback font for Outlook
This applies to email campaigns and email templates only.
If you don’t set a fallback font, Outlook for Windows can show Times New Roman instead of your web font.
In Easy Editor, in Edit source, place your cursor straight after
<head>.Paste this code above your web font code:
<!--[if mso]><style type="text/css">body, table, td, h1, h2, h3, h4, h5, p {font-family: Arial, sans-serif !important;}</style><![endif]-->
Replace Arial with the web-safe font you want, such as Georgia. Keep sans-serif or serif at the end.
Select Save.
Use an Adobe font
Copy the embed code from your Adobe Fonts account.
Follow steps 2 to 4, using your Adobe code instead of the Google Fonts code.
In Edit source, find the body, td CSS rule and add your font name at the start, for example:
body, td {
font-family: birthstone, Arial, sans-serif;
}
Enter the font name exactly as it appears in your Adobe Fonts embed code.
Troubleshooting
Problem | What to check |
Your font isn’t in the Font face drop-down menu | Select Save, then Edit design. The menu updates when the design reloads. |
| Check that your code is straight after <head> and between the two comment lines. |
| Check that you copied all three <link> lines. |
Your font shows in EasyEditor but not in an inbox | Some email clients can’t show web fonts. See Where your web font displays. |
A font from your own server or another provider doesn’t load | The server’s security settings, or the supplier’s licence, might block it. We can’t change this. We recommend you choose a similar font from Google Fonts or Adobe Fonts. |