Learn how to select default web-safe fonts or add new fonts to your design in Modern Editor.
Topics covered in this article:
One of the joys of developers since the dawn of the web has been font support. 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.
These fonts are proven to render consistently across browsers and email clients.
Learn more about CSS and web-safe fonts from w3schools:
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.
You can select any web-safe font in Modern Editor designs.
Set your font-family globally
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.
Under General Styles, click open paragraph to set Font Family.
Or, set the Font Family under the STYLESHEET > SINGLE BLOCKS > Text > Paragraph area.
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.
In Modern Editor you can use custom fonts or Google fonts in your design.
Proceed with caution! Every browser and email client will render a custom font uniquely. Always include web-safe fallbacks. Test your font across as many browsers and email clients as possible to ensure it is rendering as expected. Tip: Use WordFly's Inbox Preview tool to see how your email looks across over 30+ email clients and browsers.
Use custom fonts
You can use custom fonts if the font is one that is widely available on computers; however, the best option is to use a Google font. Review this option and the Google font option to determine what's best.
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 browsers and email clients that don't support your primary font.
Use Google fonts
You can use Google fonts in your Modern Editor design. There is great browser and email client support for Google fonts. Still, be sure to include fall-back fonts and thoroughly test 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 design, click on the HTML tab in the lower left corner.
3. Paste the embed code you copied just after the <head> in your code.
4. Add the following
<!--[if !mso]><!--> /
<!--<![endif]--> code around the @import Google code.
<!--[if !mso]><!--> <style type="text/css" data-inline-options="preserve: true; ignore: true"> @import url('https://fonts.googleapis.com/css?family=Open+Sans'); </style> <!--<![endif]-->
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.