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) | No longer supported in latest version (16.8). Use web-safe fonts. |
| 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. Follow Steps 2-5 above for inserting this code into your email.
<!--[if !mso]><!-->
<style type="text/css" data-inline-options="preserve: true; ignore: true">
@font-face { font-family: 'selfhostedfontname'; src: local('selfhostedfontname'), url('https://www.domain/assets/fonts/selfhostedfontname.woff format('woff'); font-weight: normal; font-style: normal; }
</style>
<!--<![endif]-->
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.