The Best Guide for Fonts in HTML Email

We can use 3 kinds of Fonts for HTML Email Template. They are:
1. Web-safe fonts: (Web safe fonts)
Think Arial, Times New Roman, Verdana, or Georgia as prime examples of web-safe fonts. They’re the default fonts found across the majority of different operating systems and devices.

2. Web fonts: (Web Fonts / Web Safe Fonts)
Web fonts aren’t found as part of the default fonts available on various devices and operating systems, and are specifically designed and licensed for use on websites. A couple of web fonts you may be familiar with are Open Sans and Roboto.

3. Self-Hosted Fonts: (Custom Fonts / Web Fonts / Web Safe Fonts)
Self-Hosted Fonts is like Web fonts aren’t found as part of the default fonts available on various devices and operating systems, and are specifically designed and licensed for use on websites.

I will use three-technique for HTML EMAIL:
Technique 1:

This kinds of fonts is better for html email template. Becuse this kinds of fonts supported most popular email clients. That fonts are:
font-family:Arial, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-family:Trebuchet MS, sans-serif;
and so on.

Technique 2: (While I will use web fonts in email, then I will Choose a fallback font)
=> (Web Fonts / Web Safe Fonts)

When using web fonts, it’s a necessity to have a fallback web safe fonts in place for those email clients that don’t support web fonts.
e.g. font-family: ‘Montserrat’, Verdana, sans-serif;
Here, Montserrat is web fonts and Verdana & sans-serif is fallback fonts. Which email client doesn’t supported Montserrat fonts, they will supported Verdana or sans-serif.

Css of this: font-family: ‘Montserrat’, sans-serif;

<link rel=”preconnect” href=”https://fonts.gstatic.com”>
<link href=”https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap” rel=”stylesheet”>
 
Or, To embed a font, copy the code into the <head> of your HTML
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap’);
</style>
 
The following CSS is targeting Outlook, as denoted by <!–[if mso]> and <![endif]–>, and telling Outlook to use a different font-stack.
<td class=”fallback-font” style=”font-family: ‘Montserrat’, Arial, sans-serif;”>Your text here</td>

Technique 3: (While I will use custom fonts, then I will Choose fallback fonts as web fonts in email, then I will Choose a fallback font as Web safe fonts)
=> (Custom Fonts / Web Fonts / Web Safe Fonts)
First, it will show Custom Fonts, If fails then It will show Web Fonts and finally fails Web Fonts, then it will show Web safe fonts.

font-family:’wf_5527ee9a1ac34ef3a8c5a4d99′, ‘Caveat’, cursive;
Here, wf_5527ee9a1ac34ef3a8c5a4d99 is Custom Fonts, Caveat is Web Fonts and Cursive is Web Safe Fonts.

CSS of this:

<style type=”text/css”>
@font-face {
font-family: ‘wf_5527ee9a1ac34ef3a8c5a4d99’;
font-style: normal;
font-weight: normal;
src: local(‘wf_5527ee9a1ac34ef3a8c5a4d99-Regular’), url(“https://static.wixstatic.com/ufonts/499cdb_5527ee9a1ac34ef3a8c5a4d99647f652/woff2/file.woff2”) format(“woff2”),
url(“https://static.wixstatic.com/ufonts/499cdb_5527ee9a1ac34ef3a8c5a4d99647f652/woff/file.woff”) format(“woff”),
url(“https://static.wixstatic.com/ufonts/499cdb_5527ee9a1ac34ef3a8c5a4d99647f652/ttf/file.ttf”) format(“ttf”);
}
@font-face {
font-family: ‘wf_3e7b57c29e35401b9767ba51b’;
font-style: normal;
font-weight: bold;
src: url(“https://static.wixstatic.com/ufonts/499cdb_3e7b57c29e35401b9767ba51bd6c56a8/woff2/file.woff2”) format(“woff2”),
url(“https://static.wixstatic.com/ufonts/499cdb_3e7b57c29e35401b9767ba51bd6c56a8/woff/file.woff”) format(“woff”),
url(“https://static.wixstatic.com/ufonts/499cdb_3e7b57c29e35401b9767ba51bd6c56a8/ttf/file.ttf”) format(“ttf”);
}
</style>
Basically, do NOT do this:
@font-face {
font-family: ‘Montserrat’;
src: local(‘Montserrat-Regular’), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format(‘woff2’);
}
 
style=”font-family: ‘Montserrat’, Verdana, sans-serif; font-weight: bold; font-style: italic;”
Like web design, you can pull in the genuine fonts by including these styles in your @font-face stack, like so:
@font-face {
font-family: ‘Montserrat’;
font-style: normal;
font-weight: normal;
src: local(‘Montserrat-Regular’), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format(‘woff2’);
}
@font-face {
font-family: ‘Montserrat’;
font-style: italic;
font-weight: normal;
src: local(‘Montserrat-Italic’), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format(‘woff2’);
}
@font-face {
font-family: ‘Montserrat’;
font-style: normal;
font-weight: bold;
src: local(‘Montserrat-Bold’), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format(‘woff2’);
}
@font-face {
font-family: ‘Montserrat’;
font-style: italic;
font-weight: bold;
src: local(‘Montserrat-BoldItalic’), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format(‘woff2’);
}
 
Do NOT do this, either!
@font-face {
font-family: ‘Montserrat Bold Italic’;
src: local(‘Montserrat Bold Italic’), local(‘Montserrat-BoldItalic’), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format(‘woff2’);
}

Check our services by clicking here.

Please don’t hesitate to contact us for any help or discussion.
WhatsApp:+44 7456258049
Skype: helpinfo.desk