I'm creating a HTML email newsletter. I'm using webfonts served by Typekit. It is well documented that versions of Outlook using Microsoft Word to render the email don't use the specified fallback font, but Times New Roman (see https://litmus.com/blog/the-ultimate-guide-to-web-fonts).
The work around is to target Outlook and use a different font stack:
<!--[if mso]>
<style type=”text/css”>
h1 {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
My question is: where does this code go?
In the <head>?
In the <body>?
I'm guessing it goes in the <head>, but below the main CSS hence below the </style>?
But I've noticed that when I import the code into my Email Service provider (Direct Mail for Mac) strips out this "invisible code". Why is the code between <!-- --> surely this makes the code invisible/not work?
It may be a little confusing, but email clients read if/else statements even if they are hidden by <!-- -->.
Email clients interpret this as please do: <!--[if !mso]><!-- --> and Outlook interprets it as please ignore. This does just the opposite: <!--[if (gte mso 9)|(IE)]><!-- -->
Example:
https://jsfiddle.net/wallyglenn/5hruzos5/
Outlook Desktop client does not work with most webfonts like Google fonts. Instead of using a fallback font, Outlook will use it's own fallback font, Times New Roman. This is great if you're using a serif font, but if you're not, it can seriously affect the look of your email.
Using if/else, you can target Outlook specifically to use a websafe fallback font by creating a custom style sheet. The preferred location is after the style sheet you use to target all email clients, since the last style listed is the one that gets used. If your email calls for a webfont like Gotham or Lato, this style sheet will direct Outlook to use Arial or a sans-serif font:
<head>
<style type="text/css>
css for email clients
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body, table, td, a, h1, p {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
</head>
The reason for the gte mso9 is that Outlook 2007 (mso version 9 and above) started using Microsoft Word as a formatting engine. This caused compatibility issues with web standards, but helped ensure that a document designed in Word looks appropriate in Outlook email. You can target specific versions of Outlook by using the mso number.
An example of if/else in email body:
<!--[if (gte mso 9)|(IE)]><!-- -->
starting code for Outlook specific thingy
<![endif]-->
[fallback goes here]
<!--[if (gte mso 9)|(IE)]>ending code if needed<![endif]-->
I hope that helps.
Good luck with Outlook.
Related
I have made an email signature in Outlook (2016) by pasting HTML in the window where one can type a new signature (File>Options>Email>Signatures>New).
It looks good when sending a mail, it shows all images. The receiver of the mail (on any other mail client but Outlook, e.g. on Apple Mail or Gmail) can see the images too, but when this receiver using Apple Mail or so is going to reply to this mail, the images in the signature of the originally sent email have disappeared and have been replaced by
<image001.png> (referring to images saved locally within C:\Users\[name]\AppData\Roaming\Microsoft\Signatures, in the respective [signature name]_files folder, while the src of the original <img/>s in the signature are URLs to actual accessible files on the web). These images can be displayed anyway by clicking a button to 'include attachments of the original mail', which is, let's say, weird. It apparently turns the images in Outlook-signatures into attachments, which are being blocked or so, as it seems.
Has anyone had a comparable problem, and/or is kind to share a solution for this issue?
Thank you in advance.
Try adding ? and then a random number at the end of your image URL. Also, make sure you are using a CDN to deliver the image. I use cloudinary.com...
Here is an example of what I did...
<table cellPadding="0" cellSpacing="0">
<tbody>
<tr>
<td style="vertical-align:top"></td>
<td>
<div><font size="4">Name</font></div>
<div>Title</div>
<div><span style="margin-right:8px">phone</span></div>
<div><span style="margin-right:8px"><a style="color:blue" href="mailto:email">email</a></span></div>
<div><span style="margin-right:8px">address</span></div>
<div style="padding: 0 0em 2em 0;">
<img src="http://CDN/Facebook.jpg?7" alt="Facebook" />
<img src="http://CDN/Twitter.jpg?5" alt="Twitter" />
<img src="http://CDN/Instagram.jpg?3" alt="Instagram" />
<img src="http://CDN/Linkedin.jpg?2" alt="LinkedIn" />
</div>
</td>
</tr>
</tbody>
I open this HTML in my web browser, copy and paste it into the signature section of Outlook. One caveat.. I am using the Outlook Web Browser for my email, not the Application.
I have been testing:
Outlook -> Gmail -> Outlook, and my signature stays intact.
So far this has been working for 2 days. I am going to keep testing but give it a shot and let me know if you see the same good results.
I want use a webfont in a odoo email template.
My code was:
<link href="https://fonts.googleapis.com/css?family=Molle:400italic" rel="stylesheet" type="text/css">
<p style="font-family: 'Molle', cursive; font-size: 24px;">test text in schreibschrift</p>
I believe odoo filter the email code before sending and removes some html tags.
The link tag is not in the received email, as shown in Thunderbird.
How can i bypass this?
I'd like to send both text and html versions of emails, but have Outlook users always only see the text version. Is this possible?
Trying to target a client through MIME is impossible as far as I can tell. You can however wrap everything inside your HTML <body> (including your style tag if you have one) in:
<body>
<!--[if !mso]><!-->
HTML CONTENT GOES HERE
<!--<![endif]-->
and then right before your closing </body> put the plain text version you want Outlook users to see inside this:
<!--[if gte mso 9]>
PLAIN TEXT GOES HERE
<![endif]-->
</body>
I've been trying to incorporate google webfonts in MailChimp and can't get any solutions to work.
I've tried the approach listed on Campaign Monitor's site using #import:
http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email
but I get this error when trying to preview:
An error occurred parsing your template CSS:
Cannot find a CSS file at: http://fonts.googleapis.com/css?family=Montserrat
Has anyone been able to use custom fonts within MailChimp?
It turns out it's not possible through the #import syntax. It does work using tag:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
I use custom fonts in all of my emails but not through google. If your having trouble using Google's webfonts I recommend you host the file on your own server and try to use that instead.
For me, I import my webfonts stylesheet like so:
#import url('https://www.mydomain.com/en/img/cms/mail/_a/fonts/fonts.css');
I also add a conditional-comments below my style declarations to enhance webfont fallbacks in outlook. Without this, Outlook will likely substitute your webfont for whatever it feels like, and not respect your fallback font. But if you declare this conditional comment and then wrap your text with an additional span with the class, Outlook will respect your fallback and use the font you decide.
<!--[if gte mso 9]>
<style>
.flowerpwr { font-family:Arial,sans-serif; }
.proxima { font-family:Arial,sans-serif;font-weight:normal; }
.proxima_novasemibold { font-family:Arial,sans-serif;font-weight:normal; }
</style>
<![endif]-->
The html markup looks like this:
<td align="center" style="font-family:'proxima_novaregular',Arial,sans-serif;font-size:16px;letter-spacing:0.04em;color:#333333;">
<span class="proxima">Text here</span>
</td>
This even works for styling image alt text like so:
<td>
<a href="https://www.mylink.com/" target="_blank" style="display:block;font-family:'proxima_novaregular',Arial,sans-serif;color:#666666;font-size:16px;text-align:center;letter-spacing:0.04em;text-decoration:none;outline:none;">
<span class="proxima">
<img src="a3.jpg" alt="STYLED ALT TEXT WITH WEBFONT AND OUTLOOK MAINTAINED FALLBACK" border="0" style="display:block;">
</span>
</a>
</td>
I have been building emails a lot using mailchimp recently and I had been scratching my head over this for a while. These are my findings:
works for google fonts.
#import works for fonts hosted through other sites then google (for ex. your personal site)
using something like:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
using #import for google fonts gives you an error in mailchimp (like the one horizens posted).
base64 works as well. But the code can get way to long and cause other problems.
Firefox blocks the fonts in Mailchimp preview (because it's https).
PS: different but related topic: Making responsive emails is not as terrible as the people of the internet claim.
Working on an HTML email, we've gotten the email to render properly everywhere: Outlook 2010, Mozilla Thunderbird, Horde/IMP, Gmail, Yahoo, etc. etc. However, when the email is checked via the Outlook Web App (Exchange 2010), the HTML email is incorrectly rendered sometimes.
The two issues we're seeing is that in Internet Explorer and Firefox, the font-size CSS in-line directives aren't respected and in Firefox, a gap is put between the table cells, breaking the image. This only happens when the message is NOT in the Inbox. If we drag the message from a folder into the Inbox, the problems disappear. Drag it back into a folder and they reappear. If we open the message in a new window (instead of in the preview pane), the message renders properly.
I'm guessing the CSS of the Outlook Web App is interfering, but I'm hoping someone has had a similar issue and might be able to shed some light on how we can fix this problem.
Here is the relevant message source as seen in the client:
<html>
<head>
<style>a{color:#BF0005}</style>
</head>
<body bgcolor="#F5F5F5" style="margin:0;text-align:center">
<table cellpadding="0" cellspacing="0" style="width:604px;margin:0 auto;font-family:Tahoma,sans-serif;font-size:10pt;line-height:16pt">
<tr>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:2e39cc62f2ab417d1b9461b437c72ffc" width="10px" height="410px" /></td>
<td style="padding-top:10px;margin-bottom:0;vertical-align:bottom;width:584px;height:84px"><img style="vertical-align:bottom" src="cid:5ed2b7dfeca322e0d1e0b40bd3a0a48d" width="584px" height="84px" alt="Image Alternate Text Here" /></td>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:6f108f42f85401cababf9d5dc64fb8f9" width="10px" height="410px" /></td>
</tr>
<tr>
<td style="vertical-align:top;text-align:left;background-color:#FFF;padding:0 50px 40px">
<h1 style="text-align:center;margin-top:15px;font-size:12pt">Header</h1>
<p>This is a test email.</p>
</td>
</tr>
<tr>
<td colspan="3" style="padding:30px 50px;font-size:8pt;text-align:center;color:#888888;line-height:10pt">Footer text</td>
</tr>
</table>
</body>
</html>
EDIT: I've done some digging into the source via Firebug, and I think I've narrowed it down to being a problem with the Outlook Web App. In the Inbox view, the body of the messages are encapsulated in an <iframe> and the contents of the HTML message are unchanged. However, viewing the source of messages in other folders, no <iframe> is used and the <body> tag of the message is converted into a <div> by OWA. The message is then incorporating styles from the OWA style sheet that seem to be overwriting the inline style of the HTML email.
I think we're going to open up a ticket with Microsoft.
Unfortunately, this problem is a Microsoft issue. We've opened a ticket with them a while ago, but have not heard back. Therefore, we'll just have to make do.