For compliance reasons you can use:
- licensed fonts, or
- locally hosted, offline embedment of fonts.
Important:
- It is at your own risk to upload font files to the Media Database. Any content uploaded to the Media Database is at your own risk and you need to check if the content is protected by copyright laws. For more information, see Adding fonts - FAQ.
- While some online web fonts have been known to work, we do not support them due to data protection concerns around personal data transfers outside the European Economic Area.
Adding a custom font face to a template
Here is what you need to do to add custom fonts to your template:
Prerequisites:
- You need to host the font on your server (e.g. on the server where your website is hosted).
- Before uploading custom fonts to your server, it's important to check the terms and conditions applicable to the font (e.g. if it’s allowed to upload the font to your server).
- After the fonts are uploaded to your server, proceed as follows:
a. Navigate to Content > Block-Based Templates.
b. Hover your mouse over the template you would like to update and click Edit.
c. Open the Style Editor tab and add them to your template by using the @font-face method.
In general, you can add two font weights for each font and their italic versions if available:
font-weight: 400 or normal
font-style: normal
font-weight: 400 or normal
font-style: italic
font-weight: 700 or bold
font-style: normal
font-weight: 700 or bold
font-style: italic
Code example:
@font-face {
font-family:'Web Font';
font-style:normal;
font-weight:400;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff2) format('woff2');
}
@font-face {
font-family:'Web Font';
font-style:normal;
font-weight:700;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Normal.woff2) format('woff2');
}
@font-face {
font-family:'Web Font';
font-style:italic;
font-weight:400;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Italic.woff2) format('woff2');
}
@font-face {
font-family:'Web Font';
font-style:italic;
font-weight:700;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Italic.woff2) format('woff2');
}In the example above, the font with font-weight: 400/normal will be displayed when it’s regular text and the font with font-weight: 700/bold will be shown if the text is set to bold.
You can use the following font file formats: .woff, .woff2, .otf, .eot, .ttf (.woff and .woff2 font formats are the most widely supported).
Depending on the font file format, you need to change the format part of the CSS as follows:
- Font file format: .woff - Format to be defined in the CSS:
format('woff') - Font file format: .woff2 - Format to be defined in the CSS:
format('woff2') - Font file format: .otf - Format to be defined in the CSS:
format('opentype') - Font file format: .eot - Format to be defined in the CSS:
format('embedded-opentype') - Font file format: .ttf - Format to be defined in the CSS:
format('truetype')
If multiple font file formats are available, then you can embed these as follows:
@font-face {
font-family:'Web Font';
font-style:normal;
font-weight:400;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff) format('woff'), url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.otf) format('opentype');
}- To embed font weights other than 400/normal and 700/bold, change the linked font paths.
In this case, you still need to embed the fonts as font-weight:400 and font-weight:700.
In the following example, we implemented the font weights 300 and 800 within the font paths:
@font-face {
font-family:'Web Font';
font-style:normal;
font-weight:400;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_300_Font_Style_Normal.woff2) format('woff2');
}
@font-face {
font-family:'Web Font';
font-style:normal;
font-weight:700;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_800_Font_Style_Normal.woff2) format('woff2');
}
@font-face {
font-family:'Web Font';
font-style:italic;
font-weight:400;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_300_Font_Style_Italic.woff2) format('woff2');
}
@font-face {
font-family:'Web Font';
font-style:italic;
font-weight:700;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_800_Font_Style_Italic.woff2) format('woff2');
}In the example above, the font with font-weight:300 will be displayed when it’s regular text, and the font with font-weight:800 will be shown when the text is set to bold. Please note that the fallback font will always be displayed with font-weight:400 / normal and font-weight:700 / bold.
- To implement more than two font weights for a font, extend the font names.
In the following example, we implemented the font weights 100, 400, 700 and 800 (to make the example shorter, we did not define the italic versions in this case):
@font-face {
font-family:'Web Font - Thin';
font-style:normal;
font-weight:400;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_100_Font_Style_Normal.woff2) format('woff2');
}
@font-face {
font-family:'Web Font - Thin';
font-style:normal;
font-weight:700;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Normal.woff2) format('woff2');
}
@font-face {
font-family:'Web Font - Regular';
font-style:normal;
font-weight:400;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff2) format('woff2');
}
@font-face {
font-family:'Web Font - Regular';
font-style:normal;
font-weight:700;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Normal.woff2) format('woff2');
}
@font-face {
font-family:'Web Font - Extra Bold';
font-style:normal;
font-weight:400;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff2) format('woff2');
}
@font-face {
font-family:'Web Font - Extra Bold';
font-style:normal;
font-weight:700;
font-display:swap;
src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_800_Font_Style_Normal.woff2) format('woff2');
}- Check if your template contains the variable
ff.
The variable ff is not available in all templates, only in the ones created by Emarsys (starting from 2018/2019) or in templates that are based on our basic templates (i.e. Lifestyle Labels and Universal Content Layout Template).
- If the variable
ffis not available, then you can set the font by using inline-style within the tag or a CSS class:- Example 1 - Setting the font by using inline-style:
<font style="font-family:'Web Font', Arial, Helvetica, sans-serif;">Text</font> - Example 2 - Setting the font by using a CSS class: In this case, you also need to define the class in the template’s Style Editor:
.webfont {font-family:'Web Font', Arial, Helvetica, sans-serif;}- Set the font in the block by using the CSS class within the HTML tag:
<font class="webfont">Text</font>
- Set the font in the block by using the CSS class within the HTML tag:
- Example 1 - Setting the font by using inline-style:
- If the variable
ffis available, then after implementing the fonts, add them to the variableff, including a full font stack with fallback fonts.
Notes:
- Various fallback fonts (including their distribution on Windows and macOS) can be found here: https://www.cssfontstack.com/
- We recommend specifying the custom font name first followed by one fallback font for Windows, one for macOS and the default serif or sans-serif. This means that any available serif or sans-serif font will be displayed if the web fonts cannot be displayed (not supported) or the defined fallback fonts are not available.
In the following example, you can see the values implemented for two font weights:
Item name: Web Font, Arial, Helvetica, sans-serif
Item value: 'Web Font', Arial, Helvetica, sans-serif
In the following example, you can see values implemented for multiple font weights (i.e. font weights 100, 400, 700 and 800):
Item 1
Item name: Web Font - Thin, Web Font, Arial, Helvetica, sans-serif
Item value: 'Web Font - Thin', 'Web Font', Arial, Helvetica, sans-serif
Item 2
Item name: Web Font - Regular, Web Font, Arial, Helvetica, sans-serif
Item value: 'Web Font - Regular', 'Web Font', Arial, Helvetica, sans-serif
Item 3
Item name: Web Font - Extra Bold, Web Font, Arial, Helvetica, sans-serif
Item value: 'Web Font - Extra Bold', 'Web Font', Arial, Helvetica, sans-serif
This is how the ff variable looks in this case:
- After implementing the font in the template's Style Editor and in the variable
ff, update existing campaigns for the font to appear.
When using web fonts (implemented via variable), select the font in the Block Style Settings instead of the VCE text editing tool. If you change the font in the VCE text editing tool, then the changes will not be applied and you may need to reset the block (i.e. you may need to recreate it).
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.
After changing the font by using the VCE text editing tool, the settings applied in Block Style Settings won’t take any effect. This means that you need to reset the block or create a new one.