Saturday, 24 August 2013

CSS font stack substitution issues in Outlook when using Google Webfonts

CSS font stack substitution issues in Outlook when using Google Webfonts

Specifically when I use Google Webfonts in an email I run into font
substitution issues in Outlook that otherwise do not occur. It ignores the
font stacks and goes to Times.
This happens despite using inline fallbacks font stacks and Outlook
(2007,2010, etc.) specific CSS code shown shown below.
I've noticed a similar issue that's been posted here before, but only as a
general question.
Does anyone know why this might be happening?
Linked fonts in CSS except:
<link
href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300'
rel='stylesheet' type='text/css'>
Outlook specific override CSS'
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
h1 { font-family: 'Georgia',serif !important;
font-weight:normal; }
h1 a { font-family: 'Georgia',serif !important;
font-weight:normal; }
h2 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif;
font-weight:normal; }
h3 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.cover,img.cover,a.cover {
display: block;
visibility: visible;
td { font-family: 'Trebuchet MS',arial, helvetica,
sans-serif; }
.droid { font-family: 'Georgia', serif; }
}
</style>
<![endif]-->
Example of problematic code:
<td height="30" colspan="3" align="left" valign="middle"
class="featured"><h2 style="text-align: left; padding: 0; margin: 0;
color: #00799f; font-family: 'Roboto',arial, helvetica, sans-serif;
font-size: 21px; font-weight: 100; background: none; border-bottom:
1px solid #b1d6e2; text-decoration: none; line-height: 36px;
mso-line-height-rule: exactly;">cover story</h2></td>

No comments:

Post a Comment