Add fonts

Article author
Kelly Sutter
  • Updated

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

 

Font support in email

For maximum support, these web-safe fonts are proven to render consistently across browsers and email clients:

SANS-SERIF SERIF MONOSPACE

Arial

Helvetica

Lucida

Tahoma

Trebuchet

Verdana

Georgia

Times

Courier

Looking for something more custom?

Google fonts, Adobe fonts, or self-hosted fonts can be used in your designs with a little hand-coding. Email client support varies, so it requires more testing and flexibility. Start with the font you want and include a web-safe fallback that will be used where the primary font is not supported.

EMAIL CLIENT CUSTOM FONT SUPPORT
Apple Mail (MacOS, iOS) Excellent
Outlook (Mac) Excellent
Outlook (PC) Not supported. Use web-safe fonts.
Gmail, Yahoo, Outlook.com Not supported. Use web-safe fonts.

 

Set your brand font for the editor

Go to Account > Editor Settings to set a default Font Family. Your font stack will then show up at the top of the Font Family dropdown in all WordFly editors. It will also load as the Base font in new emails and pages.

 

 

Set a Base font for your email

In your design, you can set a global font family under Stylesheet > General Styles > Base. This will be the default font for your design.

 

 

Set a font on individual blocks 

When you need to override your Base font, you can change your font in any individual text block by selecting the Styles tab and adjusting your typography elements as needed. Go to Styles > This block > Paragraph, for example.

 

 

 

Add Google Fonts + Adobe Fonts

 

1. In Google Fonts or Adobe Fonts, find the font(s) you would like to use. You will need the @import URL for Step 4.

Google Font example:

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

 

 

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

 

3. Place your cursor after the opening <head> and add a return. Copy and paste this code into the space:

<!--[if !mso]><!-->
<style type="text/css" data-inline-options="preserve: true; ignore: true">
@import url('https://yourfonturl');
</style>
<!--<![endif]-->

 

4. Replace the @import url with your font from Google or Adobe.

Completed Google font example

Completed Adobe font example

 

5. Check your code before closing the HTML tab.

Everything but the font URL should look exactly like the code in Step 3.

 

6. Set the font in your Stylesheet

Update your fonts at the global level by selecting Stylesheet > General Styles > Paragraph, and customizing your style options. Click inside the Font Family field and enter the font you have embedded. Note: When the font name includes a space, you must wrap the name in quotes.

 

 

 

Self-hosted fonts

Self-hosted fonts require server-side work and licensing permission from the font creator. The following details are provided to help you get started with helpful resources. 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.

 

2. In your design code, you must:

  • @import a CSS file hosted on your domain with all the references to the font files embedded in them (via @font-face statements) 
  • —or— Include the @font-face statements directly in the email

If using @font-face, use woff for the best support. Example:

@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 the editor, under Stylesheet > General Styles, and set your Font Family in the appropriate elements. Be sure to specify fallback fonts for browsers and email clients that don’t support your primary font.

 

 

 

Was this article helpful?

Comments

0 comments

Article is closed for comments.