Using special fonts in email is a tricky business. Just like CSS support, different email clients treat fonts in different ways. In addition, different subscribers have different fonts displayed on their computers. If you were to send out your email using an uncommon font, many of your subscribers wouldn’t be able to view your email as you intended. The key to maximum font support is to use web-safe fonts.
Topics covered in this article:
We want your emails to look great on every email client, so we’ve done thorough testing to confirm the best web-safe fonts to use in HTML emails. Email templates that you build in WordFly will have the following web-safe fonts available:
What about a custom web font?
It's really a sad state for fonts in the email design world, the web-safe fonts listed above are really the fonts you should stick with for your email design. Still your marketing team or designers may want to use a custom web font to match branding requirements. Branding is important, however custom fonts just won't render across all email clients. This is the way it has been since the incarnation of HTML email and it will probably be this way for a long time still.
Here are some general pointers for email client custom web font support:
- Apple (iOS Mail and Apple Mail): Great support
- Outlook desktop: No support
- Popular webmail clients (Gmail, Yahoo, Outlook.com...): Limited or zero support
Selecting fonts in Modern Editor emails
You can apply specific web-safe font styles to your Modern Editor emails.
Modern Editor emails have all the web-safe font family options.
You can select your font family in a few different ways:
Under the STYLESHEET tab update your fonts at the global level by selecting ESSENTIALS > General Styles > Paragraph, and customizing your style options. Just click inside the Font family field to select one of the web safe fonts for emails.
Under General Styles, click open paragraph to set Font Family.
Or, set the Font Family under the STYLESHEET > SINGLE BLOCKS > Text > Paragraph area.
You can also update the Font Family for any individual text blocks by selecting STYLES > This block > Paragraph.
In Modern Editor emails you can also enter in custom fonts or available Google web fonts into the Font family area of the Stylesheet. The template will use the font typed into the Font family area.
Proceed with caution: Be sure to test!
As we've mentioned email client support for fonts varies widely. Test your font across as many email clients as possible to ensure it is working as expected.
Tip: Use our built-in Inbox Preview tool to see how your email looks across over 30+ email clients and browsers. This will save so much time in testing!
To use custom fonts:
You can use custom fonts if the font is one that is widely available on computers.
First, find the name of the custom font you would like to use.
Next, set the font in your STYLESHEET.
Under the STYLESHEET tab update your fonts at the global level by selecting ESSENTIALS > General Styles > Paragraph, and customizing your style options. Just click inside the Font Family field and enter the font you have embedded. Be sure to specify fall-back fonts for email clients that don't support your primary font.
To use Google web fonts:
You can embed Google fonts in your stylesheet. There is wide email client browser support for Google fonts but you should be sure to include fall-back fonts and do testing to make sure you know how the font will render.
First, embed the Google font in the HTML
1. Find the Google font you would like to use, copy the @import url embed code from the Google form.
Example for Open Sans,
You can even select more than 1 font family.
Example for Open Sans and Raleway,
2. In your Modern Editor emails, click on the HTML tab in the lower left corner of the email
3. Paste the embed code you copied just after the <head> in your email code
Now, set the font in your STYLESHEET
Under the STYLESHEET tab update your fonts at the global level by selecting ESSENTIALS > General Styles > Paragraph, and customizing your style options. Just click inside the Font Family field and enter the font you have embedded.
Example of 'Open Sans', note when the font includes a space you must wrap the name in single quotes
Avoid using @font-face because your fonts won't load in all email clients because most browsers require fonts and the requesting page to have the same origin which won't be the case in the majority of email clients.
If you are able to code your own HTML emails, you can try using different fonts. Make sure to carve out time to test your HTML email in as many email clients as possible.
A list of all web-safe fonts can be reviewed here:
Proceed with caution! Every subscriber that receives your email must have the fonts from your email on their computer in order to view the fonts you’ve chosen for your hand-coded HTML email. This is the primary concern behind providing a specific list of fonts in WordFly since subscribers will inevitably have different fonts installed. It’s in your best interest to keep fonts simple and follow a prescription that is known (and tested) to work.