Google Fonts

Google Fonts

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:

  • Outlook renders the correct fallback font
  • The font file import is not stripped in some email builders (i.e. some builders remove everything that is not a meta or style tag in the <head>, thus using a <link> tag is not safe)
Jump to example


1. Use @import

Nowadays, @import is supported in all email clients that support web fonts.
Add it at the top of your embedded CSS.

2. Define the class(es)

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

You need to define fallback system fonts in the font stacks of these classes (see example below), so that clients that do read @media queries but do not support webfonts (Gmail, Yahoo!, etc.), can show a similar system font.

Columns or elements with no class specified will use the default font stack declared in the CSS reset.

3. Apply class(es)

Apply the class(es) to the elements you want to use the webfont on.

Note: if you're using headings ( <h1>, <h2>, etc.), you must apply the class directly on them, not on their parent element. Otherwise some clients (most importantly Outlook) will use the default font from the framework's reset.

For any other elements that are not headings, you can use the class directly on the column, in order to have it apply to all elements inside it. This, of course, can be overridden by adding a different class on an element inside the column, or by specifying a different font-family with inline CSS (as shown in our example).

Complete Pine webfonts in email example

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.

Example: Webfonts in email, with Pine
                        
                          

                            
                              

                              
                            

                          

                          

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.
Theme Mountain

Current Version