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

2

19

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.

Voguish answered 29/6, 2013 at 18:26 Comment(0)
D
30

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/

Dipterocarpaceous answered 1/7, 2013 at 12:56 Comment(0)
C
4

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:

Corrales answered 3/11, 2016 at 7:48 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.