Is it possible to upload font files to the Media Database?
Yes, you can upload font files to the Media Database. Like with any other assets, first check the terms and conditions and copyright laws applicable to the assets you use.
It is the client's sole responsibility to upload any content to the Media Database and they must ensure if the uploaded content is protected by the copyright laws.
Are there any restrictions for font files to be uploaded?
Yes there are. You can upload font files to the Media Database only if they meet the following requirements:
-
Font file name: Allowed characters:
A-Z
,a-z
,0-9
,-
,_
-
Font file formats:
.eot
,.otf
,.ttf
,.woff
,.woff2
I implemented the font as described. Why is it not displayed?
There are few reasons why a web font may not be displayed:
- The email client, or the webmail service, or the application does not support displaying web fonts.
- The font is not installed locally on the device, or the font is installed with another name.
For example: The font is embedded as "Web Font" in the CSS, but it is installed locally as "WebFont". - Because of a CORS error, mostly the CORS header Access-Control-Allow-Origin is missing, so it prevents the web font to be displayed. This is a setting that needs to be changed on the server where the font files are hosted on.
For more information on the CORS, see here. - The VCE text editing tool was used to change the font. In this case, not the full font stack with the fallback fonts are applied, but only the web font are used. Any default font, for example: Arial, Times New Roman, etc are displayed.
Do not use the VCE text editing tool for changing the font, especially when setting web fonts. If you are using the VCE text editing tool to set fonts, no fallback fonts will be defined, so in some cases any default font will be displayed (for example, Times New Roman or Arial) if the web fonts cannot be displayed or the selected font is not available.
Outlook on a Windows-operated device shows the Calibri font (Outlook 365/2019/2016) or Times New Roman (Outlook 2013/2010/2007) instead of the font I applied. Can this be fixed?
In some cases, Outlook displays a default font, if web fonts are used. Unfortunately, the display of web fonts is not enabled. Sometimes, locally installed fonts are shown, however, it is possible to set proper fallback fonts instead. These fallback fonts must be web safe.
To avoid this behavior, these code snippets may be set in the <head>
part of the template's frame:
- If the font is set via an inline-style on an HTML tag:
Code example:
<font style="font-family:'Web Font', Arial, Helvetica, sans-serif;">Text</font>
The code is to be defined in the <head>
part of the template's frame:
<!--[if (gte mso 9)]>
<style type="text/css">
font {font-family:Arial, Helvetica, sans-serif !important;}
</style> <![endif]
This is not only applicable on the <font>
tag, but it can also be set for other tags, for example <span>
, etc.
- If the font is set via a CSS class:
Code example:
<font class="webfont">Text</font>
The code is to be defined in the <head>
part of the template's frame:
<!--[if (gte mso 9)]>
<style type="text/css">
.webfont {font-family:Arial, Helvetica, sans-serif !important;}
</style>
<![endif]
Is it possible to apply a web font only at a specific part of the text ?
Yes, this can be done via an Emarsys Scripting Language (ESL) snippet. Do not use the VCE text editing tool to apply the font, as no fallback fonts are being set.
Note that the text that is inserted via an ESL snippet is not visible in campaign creation mode. The text and its design is only visible when checking the campaign via testmail, campaign preview, email campaign preview or via the archive link of an email campaign.
You can override the font for Outlook in the code snippet, too. See details below. You can either use the CSS tag or class selector.
Follow these steps to apply the web font on a specific part of the text only:
- Select the text that you would like the web font to be applied and copy it to the clipboard.

- Keep the text selected and click Insert Emarsys Scripting Language snippet < > icon.

- Create the ESL snippet:
- Paste the text that you just got copied to the clipboard into the field, snippet name. Use a short name only.
- The basic code snippet to use is a simple opening and closing
<font>
tag with specific styles:
<font></font>
. - The first step is to add the text in between the opening and the closing
<font>
tag:
<font>Lorem ipsum dolor</font>
. - The full font stack needs to be added in a style-attribute:
<font style="font-family:'Web Font', Arial, Helvetica, sans-serif;">Lorem ipsum dolor</font>
- If you are overriding the font for Outlook via CSS class, add the class in the
<font>
-tag also:
<font style="font-family:'Web Font', Arial, Helvetica, sans-serif;" class="webfont">Lorem ipsum dolor</font>
- As it is not possbile to use the VCE text editing tool on ESL snippets, add all styles you would like to use to the style-attribute.
For example: font-size, color, font-weight (normal/bold), text-decoration (none, underline, line-through), font-style (normal/ italic), letter-spacing, etc.:<font style="font-family:'Web Font', Arial, Helvetica, sans-serif; font-size:16px; color:#000000; font-weight:bold; text-decoration:underline; font-style:italic;" class="webfont">Lorem ipsum dolor</font>
- If your template contains responsive code, there might be styles and CSS classes available to resize the text for the mobile version. If you are using a template that was created by Emarsys initially, you may take a look at the available CSS classes in the mobile Media Query of your template first:
Go to Content > Block-Based Templates, select your email template and click Edit (pencil) icon.
You can add the class to resize the text for the mobile version to theclass
attribute in your ESL snippet:<font style="font-family:'Web Font', Arial, Helvetica, sans-serif; font-size:16px; color:#000000; font-weight:bold; text-decoration:underline; font-style:italic;" class="webfont gf">Lorem ipsum dolor</font>
- Insert the ESL snippet in the required field and click OK.

- The ESL snippet is displayed as a blue item in the text.
As you can see, its content is not displayed as defined in the snippet in the campaign creation view.

- Click Save to see the content and the applied styles.