The Best Guide for HTML Email's Fonts

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 Choosing 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>
<!--[if mso]>
<style type=”text/css”>
.fallback-font {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->


Technique 3: (While I will use custom fonts, then I will Choosing a fallback fonts as web fonts in email, then I will Choosing a fallback font as Web safe fonts)
=> (Custom Fonts / Web Fonts / Web Safe Fonts)
First it will shows Custom Fonts, If fails then It will shows Web Fonts and finally fails Web Fonts, then it will shows 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');
}


If you are looking for this kinds of Responsive HTML Email Coding??

You can message me any time, Click here.