user3573535 user3573535 - 1 year ago 122
CSS Question

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:

@import url(|Open+Sans:400,300,600|Work+Sans:400,300);

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

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


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

Answer Source

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.