TIP: This feature is available for emails and e-Detailers.
You can add custom fonts to use them in eWizard Editor. To do so, add the alternative and external font lists in the settings.json file within the fonts field. As a result, you can find the listed fonts in the Font family drop-down in Editor.
NOTE: eWizard.js doesn't add the font files to the content when you build the template. The users of the target system must have these fonts (or their alternatives) installed in their operating system.
All the fonts listed in common/styles/fonts.css are available in Editor.
If specific fonts aren't listed in fonts.css, or if the fonts are missing in the project itself, you can add the fonts field in the settings.json file in your template.
// ./settings.json"fonts": {
"alternative": "Helvetica, sans-serif",
"external": [
"Arial",
{
"name": "Custom Font",
"fontFamily": "Noto Sans",
"alternative": ""
}
]
}Where:
• alternative contains substitutive fonts when the custom font is missing. The first available system font is used.
• external contains custom fonts. The list can accept strings and objects.
The object values contain the following fields:
• name: the font name.
• fontFamily: the font family. It's applied to the text styles.
• alternative: the list of alternatives for each individual font. This field is optional.
Email client support
To ensure your fonts look the same in various email clients, use web-safe fonts as your primary fonts. If you use a custom font as your primary font, add a web-safe font as fallback. Web-safe fonts are installed in the most operating systems by default.
Use the following web-safe fonts for HTML and CSS:
• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)
If you use a custom not web-safe font, add the custom font as a web font. For example, if you use Google Fonts, the web fonts are pulled from the Google server. Web fonts work only in certain email clients. See the table of supported web fonts below.
Email client | Web font support |
Apple Mail | Yes |
Outlook 2007–2016 | No |
Outlook 2019 | No |
Outlook for Mac | Yes |
Outlook for Office 365 | No |
Gmail App | No |
iOS | Yes |
Outlook App | No |
Samsung Mail | No |
AOL Mail | No |
Gmail | No |
Office 365 | No |
Outlook.com | No |
Yahoo! Mail | No |
As you see, not all email clients support web fonts. Advantages of this approach are:
• Web fonts still display for some of your recipients.
• Web fonts work with the screenshot mode for PDF export as image.
To embed web fonts in your emails, follow these recommendations.
For more information, see Localization