If you’re seeing images Avoid Outlook rendering that don’t look great in Outlook ensure you check that you’ve defined the correct width in the HTML.
8. Outlook ignores HTML item width and height.
As we’ve already mentioned, Outlook doesn’t support styling inside of
So, when an Phone Number Data email renders in Outlook, the sections will assume the height of the text inside of them, and 100% width, even if you specify a height/width for them in code.
Once again, the fix for Outlook HTML emails is to use tables instead. We have seen this with a few other elements but the situation is the most common problem.
9. Font stacks and Times New Roman.
When it comes to font rendering, Outlook presents a unique challenge for email developers due to its limited support for web fonts and reliance on font stacks. Unlike most email clients, Outlook does not have built-in support for downloading and displaying custom web fonts directly from external sources.
Further to this, if you include a custom font at the top of your font stack, Outlook will ignore all of your fallback fonts and instead display Times New Roman. (Thanks, Outlook!)
Replace the stack using attribute selectors. Wrap text in a span.
Add MSO conditional code. Specify a custom font in a media query.
Fix 1 was the most popular among email geeks who submitted their own solutions to Email on Acid. It works because Aero leads Outlook ignores attribute selectors. This code will tell the email client to replace any style that includes the custom font Avoid Outlook rendering with the correct stack:
