Is there a way to use Google Web Fonts in an HTML email?

Question

An HTML email must (should) have its CSS inlined in order to have the expected design in most of the email clients.

Is there a way to link a Google Web Font to or embed in such an email but still maintain a broad acceptance (appropriate rendering) among email clients?

I know that an alternative would be to have an image with the corresponding typography, but I would first search for something else that might work.

Answer 1

If the font is absolutely necessary, you will have to go with the text as image solution. As of December, only iOS Mail, Mail.app, Lotus Notes 8, default Mail on Android, Outlook 2000, and Thunderbird support the use of an external custom font.

See: http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

---

Edit 2/10/2014: Since this is one of my most popular answers, here is the updated link on best practice of web fonts in emails:

http://www.campaignmonitor.com/resources/will-it-work/webfonts/

Answer 2

You can now use the NPM package custom-fonts-in-emails to embed custom fonts as images in your emails. https://github.com/crocodilejs/custom-fonts-in-emails

import customFonts from 'custom-fonts-in-emails';
import path from 'path';

const options = {
  text: 'Make something people want',
  fontNameOrPath: 'GoudyBookletter1911',
  fontColor: 'white',
  backgroundColor: '#ff6600',
  fontSize: 40
};

customFonts.png2x(options)
  .then(console.log)
  .catch(console.error);

Outputs:

<img width="461" height="51" src="data:image/png;base64,..." title="Make something people want" alt="Make something people want" style="color: white;font-size: 25.5px;line-height: 51px;text-align: center;background-color: #ff6600;">

Renders: