Google web fonts fallback issues

Hello Folks!

We're working on our Christmas email at the moment and are using a Google Web Font for our main H1. It looks lovely in those clients that support it, but the fallback we've specified looks nasty... it should be Georgia, but it so isn't!

Here are the relevant snippets...

CSS:
@import url(http://fonts.googleapis.com/css?family=Pacifico);
h1 {font-family:Pacifico, Georgia, serif; font-size: 60px; font-weight: normal; line-height: 66px; margin-bottom: 20px; text-align: center; color:#ffffff; text-shadow: 0 1px 0 #234970;}

Yay: http://i.imgur.com/0hjpcC2.png

What the fallback should look like: http://i.imgur.com/yCdhJnj.png

Boo: http://i.imgur.com/K5dQ4zB.png

Any bright ideas?

Thanks!

Nick

Stig Stig, 3 years ago

Hey Nick,

It looks like you're seeing these issues in Outlook, is that correct?

Unfortunately we've found that Outlook 2007+ doesn't handle webfont fallbacks too well. Instead of displaying the first available replacement in the font stack, it tends to go with its favorite of all fonts, Times New Roman.

A workaround I've used for this is to override the font for Outlook only (leaving the webfont out of the stack), using a conditional comment.

In the example below, I've also thrown in some vendor specific CSS properties you can use to replicate the text shadow – this should work in Outlook 2010 and 2013.

<!--[if mso]>
<style>
h1 {
  font-family: Georgia, serif !important;
  mso-effects-shadow-color: #234970;
  mso-effects-shadow-dpidistance: 0.75pt;
  mso-effects-shadow-angledirection: 5400000;
  mso-effects-shadow-pctsx: 100%;
  mso-effects-shadow-pctsy: 100%;
}
</style>
<![endif]-->

Try adding this block of code somewhere in the <head> of your email, and let us know how it goes.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Bonpantalon Bonpantalon, 3 years ago

Hi Stig

You're absolutely right, it's Outlook 07+ that's not playing nicely, although I've just spotted that in Apple Mail 5 we get nothing at all where that h1 should be!

Thank you very much for the fix - makes perfect sense and I particularly appreciate the text shadow bits for '10 and '13. I've added the block in the <head>, just under my normal CSS and run it back through Litmus. The text shadow works nicely in '10 and '13 but I'm still getting stinky old Times New Roman:

http://i.imgur.com/wTJhveR.png

Evidently the conditional comment is being picked up because the shadow is working, but the font seems to be ignored. I'm bound to be doing something daft, but not sure what... Any more ideas?

Really appreciate your help :)

Stig Stig, 3 years ago

Hey Nick,

Sorry that didn't quite work! I wonder if that might be due to the first CSS selector being more specific, but normally the !important declaration would take care of that.

Elliot Ross has shared another fix for this: Importing the webfonts from within a media query with no expressions except "screen".

The thinking behind this is that most of the email clients that support webfonts, will also support media queries (with the exception of Outlook 2000). So instead of overriding the webfont code in Outlook 2007+, you'd be hiding it from it.

If this doesn't work either, feel free to post the full campaign code here so we can have a closer look.

About Apple Mail 5 not rendering the font at all, are you seeing this in a test service (such as our Design and Spam test), or in a live copy of Apple Mail? Mail hides the text while loading the webfont, but I haven't seen any issues there once the font file has finished loaded.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
zerocents zerocents, 2 years ago

Don't worry, Apple Mail 5 renders webfonts properly, for whatever reason they just don't show up in Litmus.

Regarding Outlook, it has issues with @import, so I would suggest putting the styles directly into the html, or use conditional comments so Outlook doesn't see it.

<style>
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjaXYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
  mso-font-alt: 'Georgia';
}
</style>

OR

<!--[if !mso]><!-->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico"/>
<!--<![endif]-->

Michael Muscat
Bonpantalon Bonpantalon, 2 years ago

Hurray! Thank you very much for your help guys. Stig - the media query did the trick.

The campaign's going out as we speak.

Cheers folks, Merry Christmas :)

Stig Stig, 2 years ago

Great news! Merry Christmas, Nick :)


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
BenjaminGraphics83 BenjaminGraphics83, 2 years ago

Hi, this is the first i've seen the mso-effects-shadow being used in a template.... question: is there anyplace with full documentation of these effects and how to code for them?  If I'm able to duplicate css3 text-shadows in outlook with this; this is a great tool that would definitely help diversify what's possible with Outlook.

Stig Stig, 2 years ago

Hey Benjamin,

I haven't seen this documented anywhere, so maybe that's something we should attempt. We'll post back here if we end up doing so – thanks for the idea!

For now, you can experiment with changing the different values in the code above to see how that affects the shadow.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
CourtFantinato, 2 years ago

For the !important on the font-family declaration for Outlook not working, I have found in the past that Outlook actually ignores styles with the !important declaration.

Has anyone else gotten mso-effects-shadow working? I am trying it, but I see no text shadow in Outlook 2003 or 2007.

Stig Stig, 2 years ago

Hey CourtFantinato,

That's interesting! We've seen this happen with inline !important declarations, but have you also seen examples of CSS inside conditional comments being ignored the same way?

I don't think there's a way to get text shadows working in Outlook 2003 or 2007, unfortunately. But the code I posted above should work in 2010 and 2013 – does it seem to do so for you?


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
CourtFantinato, 2 years ago

Hi Stig,

I've done a quick test now - I've got a conditional comment with a font family declared with !important and a font colour without !important. In Outlook 2003, neither work! However in Outlook 2007 only the colour changes - the font family with !important has been ignored. It seems to me like Outlook doesn't like any styles with !important.

Since nothing is changing in 03, do conditional comments only work for 07+?

Ah my bad - I didn't realize mso-effects-shadow was for 2010+. Unfortunately I don't have access to those versions. I may have to run a CM test at some point to check it out.

CourtFantinato, 2 years ago

Looks to me from this article http://www.campaignmonitor.com/blog/post/1774/using-conditional-comments-to-1/ that the MSO conditional comments are for Outlook 07+.

Stig Stig, 2 years ago

Hey CourtFantinato,

That's true about mso conditional comments only being supported in Outlook 2007+.

Thanks for sharing your results with !important declarations too! Looks like this is something we should do thorough testing of, and possibly document somewhere like the guide to CSS support.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098