I need to create an email template. My email template MUST work in GMail and the mail app on iPhone. I had the template working properly in the mail app on iPhone with Zurb Ink. However, Gmail doesn't support the style tag in HTML emails. For that reason, I removed that framework and started from scratch. Now, the email template works fine in GMail, but the text doesn't scale up in the mail app on the iPhone. The text is all scrunched together. Currently, my HTML looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;" height="100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Welcome.</title>
</head>
<body style="background-color:silver; color: #2D2D2D; font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; padding:0; margin: 0; text-align: left; line-height: 1.3; width:100%; height:100%; min-width: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; ">
<table style="border:solid 0px #fff; width:100%;">
<tr>
<td align="center" valign="top" style="width: 100%;">
<center>
<table style="width:600px; border:solid 0px #fff; border-collapse: collapse;">
<tr>
<td align="right" style="text-align: right; vertical-align: middle;">
<span style="color: #898989; font-size:12px;">Trouble viewing email? view it in your browser</span>
</td>
</tr>
<tr>
<td style="height:77px; vertical-align: middle; padding-left:35px; background-color:#fff; border-left: solid 1px #D6D6D6; border-right:solid 1px #D6D6D6;">
<img alt="Welcome." src="http://dummyimage.com/126x36/d907d9/fff.png&text=Hello" height="36" width="126" />
</td>
</tr>
<tr>
<td>
<img alt="Welcome." width="600" height="250" src="http://dummyimage.com/600x250/d907d9/fff.png&text=Welcome+to+the+new" style="display:block;" />
</td>
</tr>
<tr>
<td style="padding:0px 32px 36px 32px; background-color:#fff; border-top:solid 0px #fff;">
<div style="color:#92cc0a; padding-top:29px; font-size:36px; font-weight:lighter;">Welcome.</div>
<div style="padding-top:15px; font-size:14px; color:#363636;">
Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!
</div>
<br />
Thank You
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Why isn't the text scaling properly on the mail app on the iPhone. I've included the viewport details. I've included the webkit-text-adjust stuff. Can someone please help me out?
Thank you so much!
You can't actually rely on styles getting inherited, which means you will have to apply every single style to every single element all the time...
This means the font-size on the div won't actually have any effect on the text within it.
For a quick fix I suggest wrapping the text in a paragraph and applying the needed styles to it.
<div style="padding-top:15px; font-size:12px; color:#363636;">
<p style="font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; font-size: 26px; line-height: 36px;">Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!</p>
</div>
Generally I would advise writing the styles in a style tag and then using a service like http://inliner.cm when you're finished and ready to inline the styles for gmail support. That way you won't have to copy&paste the font-family and default styles everywhere yourself
Using the suggested method of styling your html email in a <style> tag in the head and then using an inliner, you can actually go back to using the ink framework too and still have it work in gmail.
Add this to your <style> tag:
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
The width/padding/margin/ms-text is is obviously unrelated, but should also be there.
Also, iPhone uses webkit to render, so you should be able to override the styling manually by adding a class in the <style> tag. Gmail will ignore this of course.
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
If I remember correctly, iPhones auto scale email content unless otherwise told not to by adding initial-scale=1.0
Hope that helps. I know very well how frustrating email development can be.
Hey mate I didnt see your code but recently I fixed my newsletter by adding
-webkit-text-size-adjust:none;
in your td style
I had the same problem.
Try it might be the issue.
I had the same problem this week and tried out a lot of code. The only solution that worked was adding this line to your <style>:
<style>
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
</style>
Related
I have created an e-mail-signature in HTML and I am using it with the native Apple Mail-app on Mac and iPhone.
I am using Dark Mode, too, but sadly, the background of my emails turns white if I use my signature. I tested it, and it's because of the image I included in the signature.
Is there any way to prevent Apple Mail from showing the white background? I want the background to be dark (just as with plain text-emails). The option "Use dark backgrounds for messages" in the settings of Apple Mail is activated and in my HTML code I do not define a background color…
I'm on macOS Catalina 10.15.7 and have Apple Mail version 13.4.
This is the HTML code for my signature (I posted it without my real contact information here, of course). Everything is working correctly, just the background is white.
<body><br /><br /><br />
<style type="text/css">
:root {Color-scheme: light dark; supported-color-schemes:light dark;}
a {margin:0; padding:0; border:none; text-decoration:none;}
table, tr, td, a, span {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:15px;}
img {border-radius: 50%;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="email=no" />
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<table width="320" cellspacing="0" cellpadding="0" border-spacing="0" style="width:85px; margin:0; padding:0;">
<tr>
<td valign="top" width="80" style="width:80px; margin:0; padding:0; vertical-align:top;">
<img moz-do-not-send="true" src="URL OF IMAGE" alt="MY NAME" width="80" height="80" style="border:none; width:80px; height:80px; display:block; border-radius: 50%;">
</td>
<td width="10" style="width:10px; min-width:10px; max-width:10px; margin:0; padding:0;">
</td>
<td style="margin:0; padding:0;">
<table cellspacing="0" cellpadding="0" border-spacing="0" style="padding:0; margin:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; mso-line-height-rule:exactly; line-height:25px; color:#b0b0b0; border-collapse:collapse; -webkit-text-size-adjust:none;">
<tr style="margin:0; padding:0;">
<td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
<b><span style="color:#0099cc;">MY NAME</span></b>
</td>
</tr>
<tr style="margin:0; padding:0;">
<td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
<span style="color:#b0b0b0">MY EMAIL ADDRESS</span>
</td>
</tr>
<tr style="margin:0; padding:0;">
<td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
<span style="color:#b0b0b0">domain.com · LinkedIn</span>
</td>
</tr>
</table>
</td>
</tr>
</table><br />
</body>
Here's an screenshot of the email signature (black boxes for privacy reasons). The background of the email turns white as soon as I send the email or save it as a draft. If I edit the draft later, the background stays white.
Thank you for your answer!
I had the same problem (or at least it sounds almost identical) and I think just worked around it. Are you letting Gmail resize the images? Like, are you selecting "small", "medium", or "large" size?
The solution for me was to upload the images at the exact resolution I needed, and force Gmail to show them "original" upload size. Now the background is showing up black again in dark mode, with no extra html, css, etc required. It seems to be a bug/issue between Apple's mail apps and Gmail with image resizing.
I was pulling my hair out over this all night because it was definitely triggered by adding an image, and I knew others had it working. I searched and found nothing but your thread. But I finally got it to work, I hope this solves your issue too!
on
MacOS Big Sur 11.3.1
Apple Mail Version 14.0 (3654.80.0.2.43)
everything works fine, so maybe it's an old version problem?
Apple Mail will allow dark mode unless you have an image, in which case you need to carefully set it up to retain dark mode capability. If you haven't set it up right, it will turn off dark mode - hence the white background.
It looks like you have the <meta> parts setup okay: however, you could try putting it in the <head> section above the <body>.
But it looks like you're missing what you'd like the background colour to be.
So, put a class on the body: <body class="darkmode">, and add some styles to that class:
#media (prefers-color-scheme: dark) {
.darkmode { background-color: #111111; }
.darkmode h1, .darkmode p, .darkmode span, .darkmode a { color: #ffffff; }
}
My html email template works well with gmail except windows 10 mail. Some images look giant on my windows 10 mail but normal size on my gmail. I have check out this post and its solution, but it is not working. Below is my whole html code
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
<title th:remove="all"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
#container {
text-align: center;
max-width: 900px;
width:80%;
margin-left:10%;
margin-right:10%;
}
#salutation {
color: #e45042;
font-style: bold;
font-size:14px;
margin-top:5%;
}
#title {
font-style: bold;
font-size:17px;
color: #2869af;
}
#qrText {
margin-top:5%;
font-size: 11px;
font-style:italic;
}
#bodytext {
font-size:14px;
}
#footer {
text-align: center;
font-size: 11px;
width:70%;
margin-left:15%;
margin-top:5%;
}
</style>
</head>
<body>
<div id="container">
<div>
<img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%;"/>
</div>
<div id="salutation">
<p>Hi <span th:text="${name}"></span>,</p>
</div>
<div id="bodytext">
<p>
<b>SOME TEXT</b>
</p>
</div>
<div>
<table style="width:100%;">
<tr>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
<td style="vertical-align:bottom;width:31%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" width="100%"/></td>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
</tr>
<tr>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
</tr>
</table>
</div>
</div>
</body>
</html>
This template works well in gamil, everything down to the size and align of the images are correct, it is just not working in windows 10 mail.
What I have tried:
changed 100% -> 100px
changed 100% -> 100
Actual result: nothing changes
Expected result: images and align to be working in windows 10 mail.
Windows 10 Mail uses Word's rendering engine, just like the Outlooks on Windows. Word's rendering engine doesn’t understand the style attribute on <img> elements. So what you need to do is define a width attribute with the expected value for Outlook, and have a more flexible width in an inline style for other email clients.
Also please note that the Outlooks (and Windows 10 Mail) don’t react properly to percentage widths. Setting a width="100%" would make the image "100% the width of the file physical width", and not "100% of its parent element" as you'd expect in CSS. So don't use percentages for the width attribute.
In your case, it would end up looking something like the following:
<img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" width="600" style="width:100%"/>
I would like to make the font size responsive in my email signature. VW is exactly what I need, but doesn't appear to work in outlook. I've tried css, but I believe it needs to be inline CSS, and I'm not sure how to incorporate #media screen inline.
I've tried em, this also doesn't resize.
<body style="padding:0; margin:0">
<table width="700" cellspacing="0" cellpadding="0" bgcolor="#">
<tr>
<td bgcolor="#ffffff" width="700" valign="top">
<div style="overflow-x:auto;">
<table border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td align="left" width="30%" style="vertical-align:bottom";>
<img src="https://grapaes.com/signatures/Grapa%20and%20tag.png?
_t=1563094564" alt="Logo" border="0" style="display:block" /></td>
<td style="width: 70%; height:auto; vertical-align:bottom;">
<span style="font-size: 1vw; font-family:'Raleway', sans-serif, Arial;
color: #9d2347; font-weight: bold;">Full Name</span><br />
<span style="font-size: .9em; font-family:'Raleway', sans-serif, Arial;
color: #5f6062; font-weight: 300;">Job descrtiption</span><br />
span style="font-size: .85em; font-family:'Raleway', sans-serif, Arial;
color: #5f6062; font-weight:300;">Phone: number here<br />
Website: <a href="http://www.grapaes.com"><font color="5f6062">
website/u>
</div>
</body>
It doesn't look terrible on mobile, but the font is just a tad too small, and nothing I do seems to increase it.
The overflow-x CSS element is not supported in Outlook. You can find supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Outlook uses Word as an email editor for displaying your HTML markup. So you should follow to rules defined for Word if you want to get a nice view.
I found this on another thread on Stackoverflow, why I couldn't find it before I posted the question, I'm not sure:
font-size: calc(7px + .5vw);
This syntax worked, and finally allowed me to have scalable text. It can be easily read in mnobile now.
I'm having inconsistent/buggy issues when delivering transactional emails (in this example, purchase confirmation email) to clients.
Gmail not only auto-links the address (the clients' dynamic, local store-address in this case), but also maps the first few digits of the phone number below it as part of the address. This ends up throwing off the subsequent map that it links to since the area code is being appended to the address data that Google is sending to the map-service.
The auto-linking doesn't always behave in the manner above though. In some cases, it leaves the phone number (formatted as: (xxx) xxx-xxxx) unmolested. In others, it only recognizes part of a given address to link. Obviously this leads to poor customer experience and needs to be remedied, but I'm tasked with solving this without resorted to disabling the feature, as our marketing dept wants to preserve the function as it's intended (rightly so for good usability).
Any ideas on why this may be occurring codewise or possibly how to designate an address or phone number in the markup manually so gmail knows what specifically needs to be auto-linked as what?
This is the table BEFORE Gmail:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">Jessica Jones</td>
</tr>
<tr>
<td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">123 Main St</td>
</tr>
<tr>
<td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">Nixa, MO 65714</td>
</tr>
<tr>
<td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none; pointer-events: none;" valign="top">(417) 222-2222</td>
</tr>
</tbody>
</table>
This is the offending HTML table, in a live-test, AFTER gmail has it's way with it:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">Jessica Jones</td>
</tr>
<tr>
<td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">123 Main St</td>
</tr>
<tr>
<td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">Nixa, MO 65714</td>
</tr>
<tr>
<td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">(417) 222-2222</td>
</tr>
</tbody>
</table>
As you can see, Google in concatenating all three lines to create their URL for some reason. I just can't find documentation that would lead to better understanding of what they may be using to identify an address or phone number so it can be controlled or avoided. Their public September 2017 release notes were unfortunately not geared to devs.
And this is how it is displayed in the Gmail/Firefox (the most updated version):
In the Inbox
Hey congrats on your first question on Stack Overflow 🎉!
As #gwally mentioned, placing this in your <head> should solve this issue in some email clients (mainly iOS Mail).
<head>
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
</head>
After that, we can add a class like this in the <head><style> area:
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
Placing a class in a parent <td> is a little too aggressive, as it tries to style too much and can end up messing with all the text (not just the auto-link-detected text). Wrapping anything that might include a phone number, mailing address, or date in a <span class="unstyle-auto-detected-links"> scales well, inherits correctly, and can be used anywhere in an email.
<td>
<span class="unstyle-auto-detected-links">123 Fake Street, SpringField, OR, 97477 US<br>(123) 456-7890</span>
</td>
Important to note that we can't remove the link, we can only style the link text so it does not appear as a hyperlink (it will still be click-able / tap-able).
I've been using this technique lately on our emails at Stack Overflow and (so far) it's been working well. Cheers!
Place these two meta tags in your <head>:
<head>
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
</head>
Place this in your style sheet:
<style>
*[x-apple-data-detectors], .x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
</style>
In your body where your client data is located add a class and add hrefs to the telephone number and the email address:
<p class="x-gmail-data-detectors">Herman Munster<br />
1313 Mockingbird Lane<br />
Hollywood, CA 90210<br />
<a href="tel:+01-(323) 000-0000">(323) 000-0000<br />
<a href="mailto:herman#munster.com" target="_blank">herman#munster.com
</p>
What this should do is eliminate the blue underlining in your email, but still allow you so if someone clicks on the phone number or the email address, it will still open the default email client or start a phone application and let you do a phone call.
These are two resources that should give you more information:
https://yoast.com/dev-blog/guide-mailto-links/
https://css-tricks.com/the-current-state-of-telephone-links/
Good luck.
What is the best way to specify the font-family when coding emails for Outlook 2013? I have found that font-family is ignored when it is added inline like this:
<span style="font-family: Helvetica, Arial, sans-serif;">Text</span>
I have found that this works:
<span><font face="Helvetica, Arial, sans-serif">Text</font></span>
However, this is a pain as I have to add the tag everywhere that text is added. Wrapping a tag around several elements is ignored. Is there a way that I can set the font once and forget about it?
I had this problem and found the following post that fixed the issue:
https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman
Basically, you need to add the following conditional css style snippet right after the body tag in the email template you want Outlook to take the desired font-family (in this case Arial, Helvetica or San-Serif) instead of the sticky MSO Times-New-Roman font:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
An effective way to force Outlook 2013 to use specified font stack is to wrap the text in question in a <span> and to use !important when defining the font-family. Outlook will still remove any Google fonts that are defined in the head, but other email clients will use them. Here is an example:
<head>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
This will always be Helvetica.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 12px;">
Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
<span style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif !important;">
Outlook will display Helvetica, others will display Indie Flower.
</span>
</td>
</tr>
</table>
</body>
This came from this awesome article: https://www.emailonacid.com/blog/article/email-development/custom-font-stacks-in-outlook
I just wanted to point out something about this font issue, that it isn't necessary to put your font-family declaration inside the body tag as CoderRoller mentioned in the previous answers.
Also I found something else about this issue, I was using a google Api's font inside the of the email like this:
And then inside the body tag:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: 'Playfair Display', Helvetica, sans-serif !important;}
</style>
<![endif]-->
But Outlook doesn't agree with having a custom font like that, so then it ignores all the other fallbacks of fonts that are after your custom font, so if this is your case then just remove the custom google font, and use something like:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
I have currently this css style in the head of the HTML, I tested this with litmus, and it doesn't matter if you have the declaration inside the body tag, or in the head tag.
How are you building your emails? If you are using tables then
<td style="font-family: Helvetica, Arial, sans-serif;">
Will work fine in ANY client. Only need to use a span if part of the text in the differs from the rest.
Outlook 2013 DOES NOT ignore in the header. I know this because I've built a lot of emails and I style a:visited in the header so Outlook (specifically) doesn't change them purple and it definitely works!
EDIT: A more accurate answer would be for me to say no unfortunately you have to specify the style inline everytime. (Didn't see that bit of the Question at first!)
Snippet:
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 18px; text-align: center; color: #000000;">
Some text here.....
</td>
</tr>
</table>
There is a very simple solution that works.
Just wrap everything inside the deprecated font element!
<font face="Arial">
<!-- content -->
</font>
Unfortunately in my experience the font tag is the only thing that works consistently on Outlook (and Windows Phone, go figure). You're going to want to add the standard CSS inline for your text as well because some clients don't render font's face attribute.
Custom font is not a universally supported feature.
AOL Mail
Native Android mail app (not Gmail app)
Apple Mail
iOS Mail
Outlook 2000
Outlook.com app
Outlook iOS
Are the only email clients that support custom web fonts.
a useful article.
https://litmus.com/blog/the-ultimate-guide-to-web-fonts