Puede utilizar fuentes personalizadas en correos electrónicos HTML | Programar Plus

0

Y los usa casi como usaría fuentes personalizadas en un sitio web. Jaina Mistry tuvo la primicia sobre este último año en el blog de Litmus:

Si bien las fuentes web no tienen soporte universal, estos son los clientes de correo electrónico donde se admiten:

  • Correo AOL
  • Aplicación de correo nativa de Android (no aplicación de Gmail)
  • Correo de Apple
  • Correo iOS
  • Outlook 2000
  • Aplicación Outlook.com

Además de usar un cargador de fuentes JavaScript, que definitivamente no funcionará en el correo electrónico (ningún cliente de correo electrónico ejecutará JavaScript), en última instancia, todo se reduce a @font-face en CSS. Así que hagámoslo.

Digamos que queremos usar Lato en un correo electrónico, si podemos. Ve a hacer lo normal de Google Fonts y busca la URL para cargar Lato. Si solo visita esa URL, puede ver que está cargando Lato sobre @ font-face, y puede enganchar totalmente ese código:

En su plantilla HTML, lo pondría en un <style> bloque en el <head>, así como establecer el font-family:

<style type="text/css">
@media screen {
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  }

  ...

  body {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  }
</style>

Observe que hay algunas fuentes alternativas establecidas allí. Bien podríamos recurrir a algunas fuentes tipo Lato, si podemos.

Aquí podemos ver que esto funciona en Litmus Builder:

Pero solo para asegurarnos, tendremos que enviarlo a algunos clientes de correo electrónico reales y ver qué sucede:

✅ Lato en Apple Mail 10
🚫 Lucida Grande en Outlook 2007 (y 2010)
✅ Lato en iPhone 6
🚫 Droid Sans en Android Gmail
🚫 Lucida Grande en Gmail en la Web

Creo que la forma de pensar es: algunos lo hacen, otros no, meh, una especie de mejora progresiva genial para ayudar a igualar su marca.

(Visited 6 times, 1 visits today)