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
Related
I am facing a weird problem with Roboto Italic Font, it is not working when the Newsletters are opened up in Gmail.
I am sharing the screenshot below to better understand the issue:
In the above screenshot, you can see the font is not working for Italic Text. I set font-weight:500 for whole Headline, but it doesn't work for Italicized content.
here is the HTML:
<table role="presentation" class="wrap" width="570" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" class="hl-2">3. The month <i>October</i> is the best time to visit Jaipur.</td>
</tr>
</table>
here is the Css:
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
.hl-2 {
font-size: 18px;
line-height: 22px;
color: #34444c;
font-weight: 500;
font-family: Rubik, Roboto, sans-serif;
}
Any idea how to handle this situation? Your help would be really appreciated.
Thanks!
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 have new to work on XSLT Stylesheet. Here XHTML convert into PDF file using someother tool we have it. I have to change the font-family like to change "HelveticaLTStd-Bold", but after file conversion specific font was shown as "Times New Roman" instead of "HelveticaLTStd-Bold" and other style attribute is working good.
Here I attached the code below:
XHTML:
<table width="100%" cellspacing="0" cellpadding="2px" border="0">
<colgroup><col width="100%" /></colgroup>
<tbody>
<tr>
<td style="font-family:'HelveticaLTStd-Bold';" align="center" class="tdheader">
HEADER
</td>
</tr>
</tbody>
</table>
overrides.css
.tdheader{
font-family: 'HelveticaLTStd-Bold' !important;
color:red;
}
#font-face {
font-family: 'HelveticaLTStd-Bold';
font-style: normal;
font-weight: normal;
src: url('HelveticaLTStd-Bold.otf') format('otf');
}
Can you anyone resolve it?
Try adding the PDF specific CSS under #media like this :
#media print{
td{
font-family: 'HelveticaLTStd-Bold' !important;
color:#333
}
}
Tip : If you don't see any results or blank page while print preview try changing color mode from color to black & white or vice versa.
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>
I made an html email on dreamweaver, and used margin for some text.
for example:
<td width="453" height="115" bgcolor="#18b581"><p style="font-family: Arial, Helvetica, sans-serif; margin-left: 25px;"><strong><font size="4">Hello world?</font>
this shows perfect in dreamweaver. when i send it through outlook, i save it as outlook template. i send it to my outlook account and my hotmail. the margins work on my outlook, but the margins does not sure on hotmail, i have no idea why!!
update:
<td colspan="2" bgcolor="#FFFFFF"><h3 style="font-family: Arial, Helvetica, sans-serif; color:#1d95a5; padding-left: 25px; padding-top:30px; ">What are the benefits of the NP-C directory?</h3>
<p style="font-family: Arial, Helvetica, sans-serif; color:#555555; font-size:15px; padding-left: 25px; padding-right: 22px; padding-top:-20px;">The NP-C directory offers you the opportunity to: </p>
<ul style="font-family: Arial, Helvetica, sans-serif; color:#555555; font-size:15px; padding-left: 80px; padding-right: 51px; padding-top:-12px;">
<li><strong>Connect</strong> with healthcare professional colleagues in your local country/area who have a shared interest in NP-C</li>
<li><strong>Network</strong> with healthcare professionals around the world to share experiences of NP-C</li>
<li><strong>Exchange</strong> the latest news and information about NP-C</li>
</ul>
Margin is not supported in Outlook.com. Instead use padding in the parent <td> element.
Don't do this:
<td>
<p style="margin-left:25px;">Paragraph</p>
</td>
Instead do this:
<td style="padding-left:25px;">
<p>Paragraph</p>
</td>
Yup, welcome to the hazards of HTML email!
Check out the email standards project, they keep a catalog of all the differences between various browsers.
Best suggestion is to try and avoid relying on padding and margins and instead use fixed width table cells to position elements.