Q:

How to use montserrat font in email template? 

I am creating a new email template for one of the project.  And I want to use the Montserrat font in my email template.  But, when I receives the email the content is full of Times New Roman and no Montserrat font.  How can I use Montserrat font in the email template? 
And also I made the code with inline css.  Bus does not work.  

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:montserrat;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
 <head> 
  <link href="https://fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800" rel="stylesheet"> 
  <meta charset="UTF-8"> 
  <meta content="width=device-width, initial-scale=1" name="viewport"> 
  <meta name="x-apple-disable-message-reformatting"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta content="telephone=no" name="format-detection"> 
  <title>New email</title> 
  <! --[if (mso 16)]>
    <style type="text/css">
    a {text-decoration: none;}
    </style>
    <![ endif]--> 
  <! --[if gte mso 9]><style>sup { font-size: 100% ! important; }</style><![endif]--> 
  <style type="text/css">
@media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important; line-height:150%!important } h1 { font-size:20px!important; text-align:center; line-height:120%!important } h2 { font-size:16px!important; text-align:left; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } h1 a { font-size:20px!important } h2 a { font-size:16px!important; text-align:left } h3 a { font-size:20px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:10px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button { font-size:14px!important; display:block!important; border-left-width:0px!important; border-right-width:0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
 padding:0;
}
.ExternalClass {
 width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
 line-height:100%;
}
.es-button {
 mso-style-priority:100!important;
 text-decoration:none!important;
}
a[x-apple-data-detectors] {
 color:inherit!important;
 text-decoration:none!important;
 font-size:inherit!important;
 font-family:inherit!important;
 font-weight:inherit!important;
 line-height:inherit!important;
}
.es-desk-hidden {
 display:none;
 float:left;
 overflow:hidden;
 width:0;
 max-height:0;
 line-height:0;
 mso-hide:all;
}
.es-button-border:hover a.es-button {
 background:#ffffff!important;
 border-color:#ffffff!important;
}
.es-button-border:hover {
 background:#ffffff!important;
 border-style:solid solid solid solid!important;
 border-color:#3d5ca3 #3d5ca3 #3d5ca3 #3d5ca3!important;
}
td .es-button-border:hover a.es-button-1 {
 background:#ffffff!important;
 border-color:#ffffff!important;
}
td .es-button-border-2:hover {
 background:#ffffff!important;
 border-style:solid solid solid solid!important;
 border-color:#e5e5e5 #e5e5e5 #e5e5e5 #e5e5e5!important;
}
</style> 
 </head> 
 <body style="width:100%;font-family:montserrat;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;"> 
  <div class="es-wrapper-color" style="background-color:#FAFAFA;"> 
   <! --[if gte mso 9]>
   <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" color="#fafafa"></v:fill>
   </v:background>
  <![ endif]--> 
   <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;"> 
     <tr style="border-collapse:collapse;"> 
      <td valign="top" style="padding:0;Margin:0;"> 
       <table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed ! important;width:100%;"> 
         <tr style="border-collapse:collapse;"> 
          <td style="padding:0;Margin:0;background-color:#FAFAFA;" bgcolor="#fafafa" align="center"> 
           <table class="es-content-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center"> 
             <tr style="border-collapse:collapse;"> 
              <td style="Margin:0;padding-top:10px;padding-bottom:15px;padding-left:20px;padding-right:20px;border-radius:10px 10px 0px 0px;background-color:#FFFFFF;background-position:left top;" bgcolor="#ffffff" align="left"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                 <tr style="border-collapse:collapse;"> 
                  <td width="560" valign="top" align="center" style="padding:0;Margin:0;"> 
                   <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="center" style="padding:0;Margin:0;"><img class="adapt-img" src="https://cdn1.imggmi.com/uploads/2019/10/29/fa07bb493fd5106619500a4f53c013e4-full.png" height="52" width="151" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" width="151"></td> 
                     </tr> 
                   </table></td> 
                 </tr> 
               </table></td> 
             </tr> 
             <tr style="border-collapse:collapse;"> 
              <td style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-top:40px;background-color:transparent;background-position:left top;" bgcolor="transparent" align="left"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                 <tr style="border-collapse:collapse;"> 
                  <td width="560" valign="top" align="center" style="padding:0;Margin:0;"> 
                   <table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-position:left top;" width="100%" cellspacing="0" cellpadding="0"> 
                      
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">Hello Sam</p></td> 
                     </tr> 
      <tr style="border-collapse:collapse;"> 
                      <td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></td> 
                     </tr> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.  The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p></td> 
                     </tr> 
                    
                     <tr style="border-collapse:collapse;"> 
                      <td align="center" style="padding:0;Margin:0;"> 
                       <table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;"> 
                         <tr style="border-collapse:collapse;"> 
                          <td align="left" style="padding:0;Margin:0;padding-left:15px;padding-top:20px;padding-right:35px;"> 
                           <table width="100%" cellspacing="0" cellpadding="5" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                             <tr style="border-collapse:collapse;"> 
                              <td align="center" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;"> 
                               <table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left"> 
                                <thead bgcolor="#eeeeee"> 
                                 <tr style="border-collapse:collapse;"> 
                                  <td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">Item Type</h4></td> 
                                  <td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">Quantity</h4></td> 
                                  <td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">Price</h4></td> 
                                 </tr> 
                                </thead> 
                                 <tr style="border-collapse:collapse;"> 
                                  <td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">Shirt</p></td> 
                                  <td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">2</p></td> 
                                  <td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">5000.00</p></td> 
                                 </tr> 
         
         <tr style="border-collapse:collapse;"> 
                                  <td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">Trousers</p></td> 
                                  <td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">3</p></td> 
                                  <td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">7000.00</p></td> 
                                 </tr> 
                                 
                               </table></td> 
                             </tr> 
                           </table></td> 
                         </tr> 
                         <tr style="border-collapse:collapse;"> 
                          <td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:35px;padding-right:35px;"> 
                           <table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;border-top:3px solid #EEEEEE;border-bottom:3px solid #EEEEEE;" width="100%" cellspacing="0" cellpadding="0"> 
                             <tr style="border-collapse:collapse;"> 
                              <td align="left" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:15px;padding-bottom:15px;"> 
                               <table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left"> 
                                 <tr style="border-collapse:collapse;"> 
                                  <td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">TOTAL</h4></td> 
                                  <td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:montserrat;"><br></h4></td> 
                                  <td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:montserrat;">12000.00</h4></td> 
                                 </tr> 
                               </table></td> 
                             </tr> 
                           </table></td> 
                         </tr> 
                       </table></td> 
                     </tr> 
                     <tr style="border-collapse:collapse;"> 
                      <td class="es-m-txt-c" align="center" bgcolor="transparent" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:40px;padding-bottom:40px;"><span class="es-button-border es-button-border-2" style="border-style:solid;border-color:#FFFFFF;background:#FFFFFF;border-width:2px;display:inline-block;border-radius:11px;width:auto;"><a href="https://viewstripo.email/" class="es-button es-button-1" target="_blank" style="mso-style-priority:100 ! important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Montserrat;font-size:14px;color:#34B9B8;border-style:solid;border-color:#FFFFFF;border-width:15px 20px 15px 20px;display:flex;background:#FFFFFF;border-radius:7px;font-weight:bold;font-style:normal;line-height:17px;width:auto;text-align:center;border:2px solid #EEEEEE;border-left-width:2px;border-right-width:2px;padding:6px;"><span style="margin-top:6px;">MAKE A REPLY</span></a></span></td> 
                     </tr> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">Wamly</p><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">ABC</p></td> 
                     </tr> 
                   </table></td> 
                 </tr> 
               </table></td> 
             </tr> 
           </table></td> 
         </tr> 
       </table></td> 
     </tr> 
   </table> 
  </div>  
 </body>
</html>

A:

You are missing two things in your HTML. 
1.  You dont have fall back fonts.  
Fall back fonts are needed so if a font is not found the next font in the font family will be checked for an displayed.  
example: 
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';

Your code had only:
font-family: 'Montserrat'

Browsers were only looking for Montserrat and when not found, it defaulted to Times New Roman.  I have fixed up your HTML with fallback fonts (below) but do check if those are the fallback's you want. 
2.  You need font definition specifically for Outlook. 
You need the below code as well in the head of the document so if Outlook is not able to find a web font, it will display a font family for your browser to choose from. 
<! --[if (mso 9)]>
    <style type="text/css">
    table td{font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif' ! important;}
    </style>
<![ endif]-->

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
 <head> 
  <link href="https://fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800" rel="stylesheet"> 
  <meta charset="UTF-8"> 
  <meta content="width=device-width, initial-scale=1" name="viewport"> 
  <meta name="x-apple-disable-message-reformatting"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta content="telephone=no" name="format-detection"> 
  <title>New email</title> 
  <! --[if (mso 9)]>
    <style type="text/css">
    a {text-decoration: none;}
    table td{font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif' ! important;}
    </style>
    <![ endif]--> 
  <! --[if gte mso 9]><style>sup { font-size: 100% ! important; }</style><![endif]--> 
  <style type="text/css">
@media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important; line-height:150%!important } h1 { font-size:20px!important; text-align:center; line-height:120%!important } h2 { font-size:16px!important; text-align:left; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } h1 a { font-size:20px!important } h2 a { font-size:16px!important; text-align:left } h3 a { font-size:20px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:10px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button { font-size:14px!important; display:block!important; border-left-width:0px!important; border-right-width:0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
 padding:0;
}
.ExternalClass {
 width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
 line-height:100%;
}
.es-button {
 mso-style-priority:100!important;
 text-decoration:none!important;
}
a[x-apple-data-detectors] {
 color:inherit!important;
 text-decoration:none!important;
 font-size:inherit!important;
 font-family:inherit!important;
 font-weight:inherit!important;
 line-height:inherit!important;
}
.es-desk-hidden {
 display:none;
 float:left;
 overflow:hidden;
 width:0;
 max-height:0;
 line-height:0;
 mso-hide:all;
}
.es-button-border:hover a.es-button {
 background:#ffffff!important;
 border-color:#ffffff!important;
}
.es-button-border:hover {
 background:#ffffff!important;
 border-style:solid solid solid solid!important;
 border-color:#3d5ca3 #3d5ca3 #3d5ca3 #3d5ca3!important;
}
td .es-button-border:hover a.es-button-1 {
 background:#ffffff!important;
 border-color:#ffffff!important;
}
td .es-button-border-2:hover {
 background:#ffffff!important;
 border-style:solid solid solid solid!important;
 border-color:#e5e5e5 #e5e5e5 #e5e5e5 #e5e5e5!important;
}
</style> 
 </head> 
 <body style="width:100%;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;"> 
  <div class="es-wrapper-color" style="background-color:#FAFAFA;"> 
   <! --[if gte mso 9]>
   <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" color="#fafafa"></v:fill>
   </v:background>
  <![ endif]--> 
   <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;"> 
     <tr style="border-collapse:collapse;"> 
      <td valign="top" style="padding:0;Margin:0;"> 
       <table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed ! important;width:100%;"> 
         <tr style="border-collapse:collapse;"> 
          <td style="padding:0;Margin:0;background-color:#FAFAFA;" bgcolor="#fafafa" align="center"> 
           <table class="es-content-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center"> 
             <tr style="border-collapse:collapse;"> 
              <td style="Margin:0;padding-top:10px;padding-bottom:15px;padding-left:20px;padding-right:20px;border-radius:10px 10px 0px 0px;background-color:#FFFFFF;background-position:left top;" bgcolor="#ffffff" align="left"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                 <tr style="border-collapse:collapse;"> 
                  <td width="560" valign="top" align="center" style="padding:0;Margin:0;"> 
                   <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="center" style="padding:0;Margin:0;"><img class="adapt-img" src="https://cdn1.imggmi.com/uploads/2019/10/29/fa07bb493fd5106619500a4f53c013e4-full.png" height="52" width="151" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" /></td> 
                     </tr> 
                   </table></td> 
                 </tr> 
               </table></td> 
             </tr> 
             <tr style="border-collapse:collapse;"> 
              <td style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-top:40px;background-color:transparent;background-position:left top;" bgcolor="transparent" align="left"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                 <tr style="border-collapse:collapse;"> 
                  <td width="560" valign="top" align="center" style="padding:0;Margin:0;"> 
                   <table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-position:left top;" width="100%" cellspacing="0" cellpadding="0"> 
                      
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">Hello Sam</p></td> 
                     </tr> 
      <tr style="border-collapse:collapse;"> 
                      <td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></td> 
                     </tr> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.  The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p></td> 
                     </tr> 
                    
                     <tr style="border-collapse:collapse;"> 
                      <td align="center" style="padding:0;Margin:0;"> 
                       <table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;"> 
                         <tr style="border-collapse:collapse;"> 
                          <td align="left" style="padding:0;Margin:0;padding-left:15px;padding-top:20px;padding-right:35px;"> 
                           <table width="100%" cellspacing="0" cellpadding="5" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                             <tr style="border-collapse:collapse;"> 
                              <td align="center" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;"> 
                               <table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left"> 
                                <thead bgcolor="#eeeeee"> 
                                 <tr style="border-collapse:collapse;"> 
                                  <td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">Item Type</h4></td> 
                                  <td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">Quantity</h4></td> 
                                  <td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">Price</h4></td> 
                                 </tr> 
                                </thead> 
                                 <tr style="border-collapse:collapse;"> 
                                  <td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">Shirt</p></td> 
                                  <td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">2</p></td> 
                                  <td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">5000.00</p></td> 
                                 </tr> 
         
         <tr style="border-collapse:collapse;"> 
                                  <td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">Trousers</p></td> 
                                  <td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">3</p></td> 
                                  <td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">7000.00</p></td> 
                                 </tr> 
                                 
                               </table></td> 
                             </tr> 
                           </table></td> 
                         </tr> 
                         <tr style="border-collapse:collapse;"> 
                          <td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:35px;padding-right:35px;"> 
                           <table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;border-top:3px solid #EEEEEE;border-bottom:3px solid #EEEEEE;" width="100%" cellspacing="0" cellpadding="0"> 
                             <tr style="border-collapse:collapse;"> 
                              <td align="left" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:15px;padding-bottom:15px;"> 
                               <table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left"> 
                                 <tr style="border-collapse:collapse;"> 
                                  <td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">TOTAL</h4></td> 
                                  <td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';"><br></h4></td> 
                                  <td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';">12000.00</h4></td> 
                                 </tr> 
                               </table></td> 
                             </tr> 
                           </table></td> 
                         </tr> 
                       </table></td> 
                     </tr> 
                     <tr style="border-collapse:collapse;"> 
                      <td class="es-m-txt-c" align="center" bgcolor="transparent" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:40px;padding-bottom:40px;"><span class="es-button-border es-button-border-2" style="border-style:solid;border-color:#FFFFFF;background:#FFFFFF;border-width:2px;display:inline-block;border-radius:11px;width:auto;"><a href="https://viewstripo.email/" class="es-button es-button-1" target="_blank" style="mso-style-priority:100 ! important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:14px;color:#34B9B8;border-style:solid;border-color:#FFFFFF;border-width:15px 20px 15px 20px;display:flex;background:#FFFFFF;border-radius:7px;font-weight:bold;font-style:normal;line-height:17px;width:auto;text-align:center;border:2px solid #EEEEEE;border-left-width:2px;border-right-width:2px;padding:6px;"><span style="margin-top:6px;">MAKE A REPLY</span></a></span></td> 
                     </tr> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">Wamly</p><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">ABC</p></td> 
                     </tr> 
                   </table></td> 
                 </tr> 
               </table></td> 
             </tr> 
           </table></td> 
         </tr> 
       </table></td> 
     </tr> 
   </table> 
  </div>  
 </body>
</html>

Web fonts only work on a handful of devices
Apple Mail
iOS Mail
Google Android
Samsung Mail (Android 8.0)
Outlook for Mac
Outlook App

Fonts you can use and will render in Gmail can be found here:
https://jsfiddle.net/syfer/1xtp98r5/

