0

I'm coding an email template, and I want to use Google Fonts. This code below, links to google fonts:

<style>
@import url(https://fonts.googleapis.com/css?family=Lato|Open+Sans:400,300,600|Work+Sans:400,300);

[style*="Open Sans"] {font-family: 'Open Sans', Arial, sans-serif !important}
</style>

And, below some piece of code:

<td style="font-family:Arial, sans-serif, 'Open Sans';font-weight:300;">Some text</td>

And this code works well in Outlook and others, but for example Outlook don't respect 

font-weight:300

My question is, why ? Is this possible to have google custom font with font weight option ?

Ted Goas
  • 7,051
  • 1
  • 35
  • 42
user3573535
  • 545
  • 2
  • 7
  • 29
  • 1
    Take a look here - https://www.campaignmonitor.com/css/ - Outlook's `CSS` support since 2007 has been shocking. – CalvT Jun 08 '16 at 14:19
  • Possible duplicate of [CSS font stack substitution issues in Outlook when using Google Webfonts](http://stackoverflow.com/questions/18423338/css-font-stack-substitution-issues-in-outlook-when-using-google-webfonts) – CalvT Jun 08 '16 at 14:22
  • Thanks, but this table show, that Outlook uses font-weight.... – user3573535 Jun 08 '16 at 14:23
  • Hmm that's true. Note that `Arial` and `Open-Sans` are already included in Outlook, so it could be that it isn't importing, so the `font-weight` you want isn't available. – CalvT Jun 08 '16 at 14:27
  • This is not duplicate. I wrote, that font works as expected - im using Open Sans, and open sans is rendered, the problem is only with font-weight. – user3573535 Jun 08 '16 at 14:28

1 Answers1

3

Outlook doesn't support web fonts. Even though you're referencing Open Sans, the font you're actually seeing in Outlook is Arial, which does not have a 300 weight.

Web font support in email clients isn't great, so fallback system fonts are important. You can reference web fonts using the <link href=''> tag instead of @import to increase your coverage a little.

Ted Goas
  • 7,051
  • 1
  • 35
  • 42
  • So, no way to use Open sans in outlook 2016 for example ? – user3573535 Jun 08 '16 at 15:10
  • No, not in Outlook 2007/2010/2013/2016. They all use MS Word as a rendering engine. – Ted Goas Jun 08 '16 at 15:15
  • I'm confused as i see a lot of hacks for outlook, and authors said, that this works, for example: http://blog.postup.com/outlook-fix-for-using-webfonts-in-your-email – user3573535 Jun 10 '16 at 07:57
  • That article does not explain webfonts will work in Outlook, it explain that if webfonts are not done correctly (to display in other clients), Outlook will break and display times new roman. – Ted Goas Jun 10 '16 at 11:31
  • I tested this out a while back: http://stackoverflow.com/questions/21467381/can-outlook-2010-use-a-web-font-in-an-html-email/21485767#21485767 – John Jun 14 '16 at 15:40