Use custom fonts in your email, with fallback support
The only issue with using web fonts like those from Google Fonts in email (besides Gmail ironically not supporting them), is that Outlook has a nasty bug that will reset the displayed font to Times New Roman, if you're declaring a font stack containing a font name it doesn't know about.
You can use our simple 3-step technique to add webfonts, making sure that:
Nowadays, @import is supported in all email clients that support web fonts.
Add it at the top of your embedded CSS.
Right after the @import, define the class(es) that will apply the webfont(s), wrapping them inside a @media query. All email clients that support webfonts also support @media queries.
Doing this prevents email clients that don't support @media queries from picking up your webfont. In the case of Outlook, it prevents it from falling back to Times New Roman.
You can name them however you like; in our example we import a serif and a sans-serif, so we use .serif and .sans-serif
Columns or elements with no class specified will use the default font stack declared in the CSS reset.
Apply the class(es) to the elements you want to use the webfont on.
In this example, we import two Google fonts: a serif (Merriweather) and a sans-serif (Khand).
The last paragraph is using the system's monospace font. Being defined inline, it overrides its parent element's font family.
Webfonts in Email
(I have a .serif class, because I'm an <h2>)I have no class specified, because I inherit the 'Khand' font-family from my parent column's class.… I have no class specified either, but I'm overriding my parent column's font family with some inline CSS.