Menu
I've tried several things, including wrapping the css. Any ideas on how to get an html email Outlook 2010 to use a webfont and not default to a preinstalled font?
Here is some of the stuff I've tried:
<style type="text/css">
@font-face {
font-family: 'thegirlnextdoor';
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
</style>
391
Yes, but with a couple caveats. Keep in mind Google Fonts (and any other webfont) isn't yet compatible with major email clients, such as Gmail, Outlook, Yahoo and AOL!
Complete HTML/CSS Course 2022 Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.
Outlook '03, '07, '10 and '13 do not support webfonts. Outlook '00 and '11 do.
You also have to be mindful of the fallback. If you put in a quoted font declaration, or a webfont in the stack, unsupported Outlook versions will revert to Times New Roman, completely ignoring your font stack. After much testing, this seems to be the best solution across all clients.
Put this in your header style tag:
@import url(http://fonts.googleapis.com/css?family=Lobster);
Use it like this:
<font style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;">
<!--[if (!mso 14)&(!mso 15)]><!--><font style="font-family: Lobster, 'Lobster', Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;"><!--<![endif]-->
Your text here
<!--[if (!mso 14)&(!mso 15)]><!--></font><!--<![endif]-->
</font>
This should work in clients that support webfonts, and gracefully fall back to the font-stack in the rest. You could also declare your outer stack in a <td> if you prefer.
Yes I know, Lobster is an ugly webfont, but it worked well for testing...
67
The following technique does not require repetitive use of conditional comments. I have tested this extensively:
Inline your web-safe font family as usual, but with an extra classname on the element. (If you're using an automatic CSS inliner, it's OK to specify your web-safe fonts with the rest of your CSS using the .webfont classname.)
<td style="font-family: arial, sans-serif;" class="webfont">Text</td>
In the <head>, override the web-safe font family with your webfont like so:
<style type="text/css">
@import url(http://mysuperjazzywebfont.com/webfont.css);
@media screen { /* hides this rule from unsupported clients */
.webfont {
font-family: "Super Jazzy Webfont", arial, sans-serif !important;
}
}
</style>
Note: wrapping the .webfont class in the simple @media screen query simply prevents Outlook 07, 10 and 13 from mistakenly using Times New Roman instead of your fallback fonts. Reference
These clients display the web font:
@media)The following Outlook versions get Arial:
... and numerous other more predictable clients get Arial.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
