Search code examples
htmlcsshtml-emailwebfonts

Email design - font weight on google fonts

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 ?

Solution

  • 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.