
Office 365: Dude, where's my font?
Building a new template? Using placeholder links? Office 365 giving you grief?
The problem
Text appears to randomly ignore styling in Office 365 (ie. font-size, font-family, color, line-height).
The cause
The problem appears to be caused by placeholder links in the template, but it doesn't always happen. The Office 365 preprocessor is clearly doing something funky.
The solution
You just have to use well formed placeholder links when testing your template:
Don't do this
<a>
<a href="">
<a href="#">
<a href="$MERGE_TAG$">
<a href="And then">
Do this
<a href="#top">
<a href="http://www.bing.com/">
<a href="http://any.well.formed/link">
Example code that breaks in Office 365. The <p>
tag reverts to default font styles.
<h1 style="Margin: 20px 0; line-height: 100%; font-family: Helvetica Neue, Arial, sans-serif; font-size: 56px; font-weight: bold; color: #424242">
<a href="#" style="line-height: 100%; text-decoration: none; color: #424242">Heading</a>
</h1>
<p style="Margin: 20px 0; line-height: 122%; font-family: Helvetica Neue, Arial, sans-serif; font-size: 22px; color: #424242">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus purus quis
tellus adipiscing sit amet suscipit justo malesuada.
</p>
Simply changing the href to #top
fixes it. Nesting the font styles inside the <p>
tag also fixes it, but wasn't what I needed (ie, <p><span style="font styles here"></span></p>
).
As you can see, this only really presents itself as a problem when building a template, since you wouldn't deploy a campaign with empty links.
Edit: This problem is related.