css - para - ¿Hay alguna manera de usar Google Web Fonts en un correo electrónico HTML?

google fonts español

Question

Un correo electrónico HTML debe (debería) tener CSS insertado para tener el diseño esperado en la mayoría de los clientes de correo electrónico.

¿Existe alguna manera de vincular una fuente web de Google o insertar en un correo electrónico de ese tipo, pero aún así mantener una amplia aceptación (representación adecuada) entre los clientes de correo electrónico?

Sé que una alternativa sería tener una imagen con la tipografía correspondiente, pero primero buscaría otra cosa que pudiera funcionar.

Answer 1

Si la fuente es absolutamente necesaria, deberá ir con el texto como solución de imagen. A partir de diciembre, solo iOS Mail, Mail.app, Lotus Notes 8, correo predeterminado en Android, Outlook 2000 y Thunderbird admiten el uso de una fuente personalizada externa.

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

Editar 2/10/2014: Dado que esta es una de mis respuestas más populares, aquí está el enlace actualizado sobre las mejores prácticas de fuentes web en los correos electrónicos:

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

Answer 2

Ahora puede usar el paquete NPM custom-fonts-in-emails para incrustar fuentes personalizadas como imágenes en sus correos electrónicos. 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);

Productos:

<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: