Can I Add Google Fonts to My Email Design Toolbox Yet?

Geoff Phillips | 2013-11-04T14:27:50+00:00 | email on acid logo

You betcha! Last I checked, this is the 21st century!

We know what you want: flavorful fonts with an easy fallback to make your emails POP! Google Fonts makes integrating new typography a total cake-walk!

Do you need something creepy for Halloween? Maybe a font to make your readers feel like they’re in the Wild West?

Let’s get started with this super simple example from the Google Fonts getting started page.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making Email Beautiful!</div>
  </body>
</html>

 

Which should come out looking like:

Making Email Beautiful!

Not seeing anything special? Perhaps you’re not viewing it in a supported browser.

Support for Google Fonts

Some clients are still in the Dark Ages and don’t support Google Fonts, but the following ones do:

Client Supports Google Fonts
Apple Mail 4, 5, 6  
LotusNotes 8  
Outlook Express  
Thunderbird 13  
Android 2.3, 4 (Native Client)  
iPad (Native Client)  
iPhone (Native Client)  
Kindle Fire (Native Client)  

You’ll notice that these fonts have wide support in mobile clients. Since mobile is on the warpath to conquer all email opens, we think the time for web fonts has come.

How it Works

Google hosts these fonts, so you really don’t have to do much. You just need to set up a link to the stylesheet, like this:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> 

 

Then create a font stack, just like you normally would.

p {font-family:"Tangerine","Times New Roman",Georgia,Serif;}

 

In our sample above, we called the Google Font first. If the client can’t use it, the next font in the stack will be the fallback. It’s very important to find a suitable and well-supported fallback font. Not everybody will see the new font, but unless minor changes in line height are an issue, it shouldn’t make too much of a difference. Check out the full list of Google Fonts here.

Yeah, we know: when it comes to HTML email, typography is still stuck in the 20th century. However, with mobile clients (and their stellar support for Google Fonts) on the rise, we can finally have our cake and eat it too.

Submit a Comment