How to add fonts

Learn how to select default web-safe fonts or add new fonts to your design in Modern Editor.


Topics covered in this article:

Fonts: what to expect in email versus web-pages

Selecting a font in Modern Editor

Using Google fonts, Typekit fonts or self-hosted fonts in Modern Editor

 

 

Fonts: what to expect in email and web-pages

 

Font support has been one of the joys of developers since the dawn of the web. Just like CSS support, every single browser and email client has different support for fonts. In addition, every recipient of your emails or pages will have different fonts installed on their computers. The key to maximum font support is to use web-safe fonts.

 

Web-safe fonts

These fonts are proven to render consistently across browsers and email clients.

Arial
Courier
Georgia
Helvetica
Lucida
Tahoma
Times
Trebuchet
Verdana

 

Learn more about CSS and web-safe fonts from w3schools:

http://www.w3schools.com/cssref/css_websafe_fonts.asp.

 

Custom fonts

Of course, when your design requires a custom font there is a way! The general tip is to start with the font you want and insert several fall-backs that will be used where the email client or browser will not support the primary font.


What to expect for email client custom font support:

  • Apple (iOS Mail and Apple Mail): Great support
  • Outlook desktop: No support in Outlook PC, limited support in Outlook Mac
  • Popular webmail clients (Gmail, Yahoo, Outlook.com...): Limited or no support, depends on the email client and browser
  • 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.
  • Check out the Litmus ultimate guide to fonts in email for a deep dive.

 

 

 

Selecting a font in Modern Editor

 

You can select any web-safe font in Modern Editor designs. We recommend setting your main font under Account > Editor Settings and in any design under the STYLESHEET > General Settings > Base. You can change your font in any individual text block by selecting the STYLES tab and adjusting your typography elements as needed.

 

Set your font-family globally

Go to Account > Editor Settings to set a global font family. This global setting will appear in font family dropdowns in all WordFly editors (Email, Page, and Image editors).

 

In your design, you can set a global font family under the STYLESHEET tab by selecting ESSENTIALS > General Styles > Paragraph. Click inside the Font family field to select one of the web safe fonts or add your custom font.

 

Under General Styles, click open paragraph element to set Font Family.

 

Or, set the Font Family under STYLESHEET > SINGLE BLOCKS > Text > Paragraph.

 

Set your font-family on individual blocks 

You can also update the Font Family for any individual text blocks by selecting STYLES > This block > Paragraph.

 

 

 

Using Google fonts, Typekit fonts or self-hosted fonts in Modern Editor

 

In Modern Editor you can use Google fonts, Typekit fonts, or self-hosted fonts in your design. You'll have the best support for Google or Typekit fonts, but you can still explore self-hosted fonts if you're up for a little more work.

 

Every browser and email client will render a custom font differently. Always include web-safe fallbacks in your font-family stack. Test your font across as many browsers and email clients as possible to ensure it is rendering as expected. Use WordFly's Inbox Preview tool to see how your email looks across over 50+ email clients and browsers.

 

 

 

Using web fonts like Google fonts or Typekit fonts

You can use Google fonts or Typekit fonts in your Modern Editor design. There's great browser and email client support for Google fonts and Typekit fonts! Even so, be sure to include fallback fonts in your font-family stack, and thoroughly test to make sure you know how the font will render.

 

We'll review how to add a Google font to your design. Replace the font URL in the instructions for a Typekit font.

 

1. Find the Google font you would like to use. Copy the @import URL from Google fonts.

Example for Open Sans,

@import URL https://fonts.googleapis.com/css2?family=Open+Sans&display=swap

 

You can even select more than 1 font family.

Example for Open Sans and Raleway,

@import URL https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway&display=swap

 

2. In your Modern Editor design, click on the HTML tab in the lower left corner.

 

3. Paste the embed code after the <head> in your code.

  • Place your cursor after the opening <head> and add a return
  • Paste in the following code and replace the font URL from step 1 for @import url
<!--[if !mso]><!-->
<style type="text/css" data-inline-options="preserve: true; ignore: true">
@import url('https://yourfonturl');
</style>
<!--<![endif]-->

 

Example from in the editor,

 

 4. Then, 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.

 

Note: when the font includes a space you must wrap the name in single quotes.

 

 

Using self-hosted fonts

You can use self-hosted fonts with some additional work. Self-hosted fonts require server-side work. The following details are provided to help you get started with helpful resources, but WordFly support cannot configure or troubleshoot self-hosted fonts.

 

1. Configure CORS on your server to allow for cross-domain serving of your font assets. Learn more

2. In your Modern Editor design code, you must either @import a CSS file hosted on your domain with all the references to the font files (via @font-face statements) embedded in them, or you need to include the @font-face statements directly in the template. If using @font-face, use woff for the best support.

 

Example @font-face woff reference:

@font-face { font-family: 'selfhostedfontname'; src: local('selfhostedfontname'), url('https://www.domain/assets/fonts/selfhostedfontname.woff format('woff'); font-weight: normal; font-style: normal; }

 

3. In Modern Editor, under STYLESHEET > ESSENTIALS > General Styles, and set your Font Family in the appropriate elements. Be sure to specify fall-back fonts for browsers and email clients that don't support your primary font.

 

 

Have more questions? Submit a request