How do I upload fonts for my email Template? (Modern & Classic Editor)

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:

Web-Safe Fonts for HTML emails

CLASSIC EDITOR: Selecting a Font

MODERN EDITOR: Selecting a Font

MODERN EDITOR: Using custom or Google fonts

HAND-CODED EMAILS: Selecting a Font

 

 

 

Web-Safe Fonts for HTML emails

 

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:

Arial
Courier
Georgia
Helvetica
Lucida
Tahoma
Times
Trebuchet
Verdana

 

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 for your Built-in-WordFly emails

 

You can apply specific web-safe font styles to your emails built in WordFly.

 

CLASSIC EDITOR: Selecting a Font

  • You can also manually update fonts directly in your Template in any text area.

Template_editor.PNG

 

 

 

MODERN EDITOR: Selecting a Font


Modern Editor emails have all the same font family options as Classic Editor emails.

 

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.

 

Or, set the style under the Stylesheet tab > Single Blocks > Text > Paragraph area.

 

You can also update fonts for any individual text area by selecting Styles > This block > Paragraph.

 

 

 

MODERN EDITOR: Using custom or Google fonts


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.

 

Find the name of the custom font you would like to use.

Example 'Calibri'

 

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,

 

 

To use Google web fonts:

First, embed the Google font in the HTML

 

1. Find the Google font you would like to use, copy the embed code from the Google form.

Example for Open Sans,

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

 

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

Example

 

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,

 

*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.

 

 

 

What if I hand-code my HTML emails?

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:
http://www.w3schools.com/cssref/css_websafe_fonts.asp.

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.  

Have more questions? Submit a request
Powered by Zendesk