So I am using @font-face in my emails and Outlook 2007, 2011 and 2013 were giving me trouble. So I wrapped the @font-face CSS in conditional < !--[if !mso] > tags and this works great for CSS specific styles in outlook (desktop client) but this Completely breaks my emails in outlook.com. They come through blank as in no content! A completely white nothingness!
I've tried various forms of the outlook conditional tags such as < !--[if !mso] >
Below is my current code:
<!--[if gte mso 9]>
<style type="text/css">
@import url(http://image.commonsensemedia-email.org/lib/fea013707564077e77/m/5/csm-fonts.css);
</style>
<![endif]-->
Also below is a litmus test so you can see the results:
https://litmus.com/pub/a49f7b4/screenshots
Any reason why these emails are completely empty in outlook.com?
------UPDATE:2/18/2014 MY SOLUTION ------
This seemed to work perfectly across all platforms. Once I removed all HTML from comment tags everything worked great.
<!--[if !mso]><!-->
<style type="text/css">
@import url(http://image.commonsensemedia-email.org/lib/fea013707564077e77/m/5/csm-fonts.css);
</style>
<!--<![endif]-->
Recently, I ran into an issue with blank emails for outlook.com (@hotmail and @live) email accounts. The issue we experienced had to do with CSS comments in our inline stylesheets. Basically, what fixed the blank email experience for me was changing CSS comments to server-side comments (or deleting them entirely). If I had CSS comments like /* comment */ in our CSS, outlook.com would render blank emails.
In addition, I personally don't think its good practice to use external stylesheets in HTML emails (or email in general). It is best to add your CSS via <style></style> tags in the <head> of your template/email, or to go further and inline that same CSS to each HTML element in the email. Here's some background on why you shouldn't include external stylesheets in email:
As @digitalmc pointed out in the comments, it seems the issue is related to having HTML in your client side comments.