The Ultimate Guide to Web Fonts

Históricamente, elegir la fuente adecuada para su correo electrónico nunca ha sido demasiado difícil, teniendo en cuenta el número limitado de fuentes seguras para la web entre las que elegir. Pero las cosas han cambiado. Cada vez son más los diseñadores de correo electrónico que superan los límites y adoptan las mismas técnicas de desarrollo que los diseñadores web llevan años utilizando: la implementación de fuentes web en sus correos electrónicos.

Las fuentes web permiten a los diseñadores web ser más creativos con su tipografía, permitiéndoles elegir fuentes no estándar en sus diseños.

Como suele ocurrir cuando se abren nuevos caminos en el diseño y el desarrollo del correo electrónico, los miembros con visión de futuro de la comunidad fueron de los primeros en hacer llegar estas técnicas a nuestras bandejas de entrada (y a nuestra atención). Le debemos un gran agradecimiento a la fantástica guía de Campaign Monitor sobre fuentes web, a «A Type of Email» de Paul Airy y a Style Campaign por su inspiración.

En la Guía definitiva de fuentes web, profundizaremos en los detalles de lo que son las fuentes web y cómo los diseñadores de correo electrónico pueden implementarlas en sus mensajes.

¿Qué es una fuente web?

Hay dos tipos diferentes de fuentes disponibles para los diseñadores de correo electrónico para sus correos electrónicos: las fuentes seguras para la web y las fuentes web. Aquí está la diferencia entre los dos:

• Fuentes seguras para la web
  Piense en Arial, Times New Roman, Verdana o Georgia como ejemplos principales de fuentes seguras para la web. Son las fuentes por defecto que se encuentran en la mayoría de los diferentes sistemas operativos y dispositivos.

• Fuentes web
  Las fuentes web no se encuentran como parte de las fuentes por defecto disponibles en varios dispositivos y sistemas operativos, y están específicamente diseñadas y con licencia para su uso en sitios web. Un par de fuentes web que quizá conozcas son Open Sans y Roboto.

¿Por qué fuentes web?

Como vendedor y diseñador, conoces la presión de mantener la marca en el correo electrónico, con colores, diseño y -sí- tipografía. Encerrar el texto importante en las imágenes ha sido una práctica estándar en el diseño del correo electrónico como una forma de mantener la marca y ser creativo. Pero «ocultar» el texto en las imágenes limita la accesibilidad del correo electrónico porque los lectores de pantalla no pueden leer el texto de la imagen.

Las fuentes web abren nuevas vías de creatividad en la tipografía, lo que permite a los diseñadores de correo electrónico ser creativos y accesibles, y ceñirse a la apariencia de su marca.

Correo electrónico y fuentes web

Aunque las fuentes web no tienen soporte universal, estos son los clientes de correo electrónico en los que son compatibles:

• Apple Mail
• iOS Mail
• Google Android
• Samsung Mail (Android 8.0)
• Outlook para Mac
• Outlook App

La lista de clientes de correo electrónico compatibles puede parecer corta, pero anímate: la mayoría de ellos se encuentran entre los 10 clientes de correo electrónico más populares. Eso es algo para estar entusiasmado!

*Consejo profesional: En abril de 2018, Gmail lanzó una interfaz actualizada para su cliente de correo web. Esta nueva interfaz utiliza dos fuentes web populares: Google Sans y Roboto. Qué significa esto? A pesar de que Gmail no es compatible con las fuentes web, si utilizas cualquiera de estas fuentes web en tus correos electrónicos, realmente se renderizarán en Gmail. Simplemente añade las fuentes a tu atributo CSS font-family si quieres utilizarlas en tu correo electrónico.

Descubre tu top 10 Cuando se trata de email marketing, todo depende de tu audiencia. Utilice Litmus Email Analytics para descubrir qué clientes de correo electrónico son más populares entre sus suscriptores. Regístrese gratis! Descubra su audiencia →

Cómo incrustar fuentes web en el correo electrónico

Hay tres enfoques principales que puede tomar al usar fuentes web en sus correos electrónicos.

@import

Usar @import es uno de los enfoques más simples para importar fuentes web en el correo electrónico. Coloque la siguiente línea de código en el <head> de su correo electrónico, normalmente en la parte superior de su <style>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

En este ejemplo, el nombre de la familia de fuentes importada es «Montserrat».

Su servicio de fuentes web le dará la URL que necesita. Si aloja la fuente usted mismo, tendrá que apuntar la URL al lugar donde se encuentra su archivo de fuentes web.

Este método está bien soportado en la mayoría de los clientes de correo electrónico mencionados anteriormente, y sólo carece de soporte en Android 2.3 (Android Gingerbread) – una versión antigua de Android que tiene una cuota de mercado cada vez más pequeña.

<link>

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

Al igual que el método @import, su servicio de fuentes web definirá el valor href. Si alojas el archivo de fuentes tú mismo, cambia esta URL para que apunte al lugar donde se encuentra la fuente web en tu servidor. Y querrá colocar esta línea de código en el <head> de su correo electrónico, cerca de la parte superior.

El método <link> funciona ligeramente mejor que el método @import, con soporte de todos los clientes de correo electrónico mencionados (¡hurra!).

Entonces, ¿por qué elegir un método sobre otro? El método @import retrasa la carga de la fuente web que se está importando hasta que el HTML en el que está incrustada esté completamente cargado. Esto puede hacer que tu fuente web tarde un poco más en aparecer en tu correo electrónico, mientras se carga el resto del correo. Por el contrario, el método <link> carga el recurso en línea a medida que se lee el código del archivo HTML (de arriba a abajo), lo que podría retrasar la carga de su correo electrónico si su archivo de fuentes web es particularmente grande.

@font-face

Los servicios de fuentes web en línea suelen ofrecer cinco formatos de archivo para elegir: .eot, .woff, .woff2, .svg y .ttf. El formato .woff es el más compatible con el correo electrónico, por lo que le sugerimos que utilice este formato siempre que pueda. El método @font-face es el único que le permite elegir específicamente qué formato de archivo desea importar, lo que lo convierte en el método más a prueba de balas para implementar fuentes web.

Aquí se muestra una declaración @font-face típica para importar una fuente web en el correo electrónico utilizando Google Fonts como nuestro servicio de fuentes web elegido:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

Desgraciadamente, si utiliza Google Fonts, no es fácil encontrar la URL de una fuente web: hay que pasar por unos cuantos obstáculos.

1. Una vez que la hayas encontrado y seleccionado, aparecerá una pequeña barra negra en la parte inferior de la pantalla. Cuando hagas clic en ella, verás una pantalla como ésta:

2. Copia la URL de la fuente web (resaltada arriba), y pégala en la barra de direcciones de Safari o de Internet Explorer.
En este método utilizamos Safari o Internet Explorer, ya que Google Fonts utiliza la detección del navegador para decidir qué tipo de archivo de fuente se sirve. Para este método queremos utilizar el tipo de archivo .woff. Usando Google Chrome el tipo de archivo de fuente .woff2 que se servirá en el navegador que tiene soporte limitado. Gracias a Elliot Ross por esta información adicional!

Una vez que la página se haya cargado, verá una declaración CSS en la página:

3. Copie este CSS y péguelo en la sección <style> de su correo electrónico.
Aunque este método se considera el más a prueba de balas, el proveedor del servicio de fuentes web podría realizar cambios en la URL de acceso directo utilizada para importar la fuente web. Si decide utilizar este método, pruebe su correo electrónico con regularidad para asegurarse de que sus fuentes web sigan representándose con el paso del tiempo.

En Litmus, el método @font-face es nuestra implementación preferida para importar fuentes web en nuestros correos electrónicos.

Todo el mérito de este método de importación de fuentes web se debe al defensor de la accesibilidad del correo electrónico Paul Airy, como se detalla en un boletín pasado de Type: E (al que deberías suscribirte, si aún no lo has hecho).

Usar fuentes web en el correo electrónico

Una vez importada la fuente web, usarla en el correo electrónico es tan fácil como usar una fuente segura para la web, utilizando el nombre de la familia de fuentes definido en el método de importación:

font-family: 'Montserrat', sans-serif;

Elegir una fuente de reserva

Cuando se usan fuentes web, es necesario tener una fuente segura para la web de reserva para aquellos clientes de correo electrónico que no soportan las fuentes web.

Fuentes web seguras por defecto

Cada cliente de correo electrónico tiene una fuente por defecto si la fuente listada en la pila de familias de fuentes no está disponible. Por ejemplo, Gmail utiliza Arial, Apple Mail utiliza Helvetica y Outlook utiliza Calibri.

Si no te gusta ninguna de estas fuentes por defecto, tenemos buenas noticias: puedes elegir tu fuente de reserva en la pila de familias de fuentes.

font-family: 'Montserrat', Verdana, sans-serif;

Piensa en esto como una lista priorizada de fuentes preferidas. Si un cliente no puede cumplir con tu elección número uno, recurrirá a la siguiente de tu lista.

Por ejemplo, utilizando la pila de familias de fuentes anterior, Gmail ignorará la primera fuente de la lista, ya que es una fuente web que no es compatible con Gmail, y la fuente representada en el correo electrónico será Verdana. Si Verdana no es compatible con el dispositivo utilizado (lo que sería muy raro, ya que Verdana es una fuente web segura), el dispositivo utilizaría la fuente sans-serif predeterminada para su sistema, ya que es la tercera fuente de la lista.

Cómo elegir la fuente fallback correcta

Elegir la fuente fallback correcta que conserve el diseño de su correo electrónico es clave para servir una gran experiencia a todos sus suscriptores, independientemente del cliente de correo electrónico que estén utilizando.

Las fuentes de reserva deben ser del mismo tipo que la fuente web: utilice una fuente de reserva sans-serif si su fuente web es una fuente sans-serif, y una fuente de reserva serif si su fuente web es también una fuente serif. Utilizar el mismo estilo de fuente ayudará a mantener el diseño de tu correo electrónico en diferentes clientes de correo electrónico. Puede dar un paso más analizando la altura x de las fuentes.

La altura x es la altura vertical de la fuente. Lo ideal es elegir una fuente de reserva que tenga una altura x similar para evitar que el diseño de su correo electrónico se desmorone cuando se utilice la fuente de reserva.

Aquí tiene un ejemplo de las sutiles diferencias en la altura x entre las fuentes Verdana, Arial y la fuente web Proxima Nova. Estas sutiles diferencias pueden hacer toda la diferencia en la toma o la ruptura de su diseño de correo electrónico cuando las fuentes web no están representando.

CSS Font Stack tiene una lista completa -incluyendo la cobertura del sistema operativo- de fuentes seguras para la web que se pueden utilizar como fuentes de reserva.

Evitando la falsa negrita / falsa cursiva

Si tiene versiones en negrita y cursiva que acompañan a sus archivos de fuentes web, entonces vamos a usarlas. Los diseñadores de tipos de letra han puesto mucho pensamiento y esfuerzo en conseguir todos los diferentes estilos de una fuente justo, por lo que es la mejor práctica para aplicar el diseño de tipo original en lugar de permitir que el cliente de correo electrónico o el navegador para aplicar al azar una negrita o cursiva de imitación a la fuente regular.

Básicamente, NO hagas esto:

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Al igual que el diseño web, puedes tirar de las fuentes genuinas incluyendo estos estilos en tu pila @font-face, así:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

Como puedes ver, los diferentes estilos tiran de diferentes fuentes independientemente de la familia de la fuente. De esta manera, si usted pone estilo a su fuente en el HTML como esto:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

… ¡entonces se obtendrá la fuente genuina ‘Montserrat-BoldItalic’! Del mismo modo, con sólo añadir font-weight: bold; se obtendrá ‘Montserrat-Bold’ y con sólo añadir font-style: italic; se obtendrá ‘Montserrat-Italic’.

Entonces, te estarás preguntando-¿por qué hacerlo de esta manera en lugar de declarar un font-family diferente para cada estilo, lo que también atrae a las fuentes genuinas? Así es como se ve:

¡Tampoco haga esto!

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

Esto presenta un problema. El uso de nombres de familias de fuentes para almacenar estilos no sólo crea un CSS excesivamente complicado y redundante, sino que también despoja a su texto de estilo si sus fallbacks se activan. Así que, por ejemplo, si ves el código anterior en Gmail (que no admite fuentes web personalizadas), sólo verás Verdana sin negrita ni cursiva en lugar de Montserrat Bold Italic. Si mantienes tu familia de fuentes y tus pesos/estilos de fuente separados, tus fuentes de reserva seguirán manteniendo el estilo correcto.

Outlook, ¡qué me estás haciendo!

Con Times New Roman como fuente de reserva por defecto, Outlook ha sido tradicionalmente un reto para los vendedores de correo electrónico con corazón de tipografía. Mientras que Outlook 2019 -que es la versión más reciente de Microsoft de su cliente de correo electrónico de escritorio- honra las fuentes de reserva especificadas en el código, las versiones más antiguas de Outlook siguen siendo un desafío.

Si está utilizando el método de importación @font-face, Outlook 2007/10/13/16 se ajustará por defecto a Times New Roman sin importar la fuente de reserva que tenga en su lugar. La buena noticia es que hay un truco bien probado que resuelve este problema.

El siguiente CSS se dirige a Outlook, como se indica en <!-> y <!->, y le dice a Outlook que utilice una pila de fuentes diferente.

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

Utiliza la clase «fallback-font» en tu correo electrónico siempre que definas tu font-family:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

Y tus fuentes en Outlook 2007/10/13 retrocederán elegantemente a Arial, en lugar de Times New Roman.

Otra solución para este error es envolver el código de importación de @font-face en una consulta de medios, ocultándolo de Outlook:

@media screen { @font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}}

Outlook simplemente ignorará «Montserrat» en su pila de font-family y leerá la siguiente fuente.

También existe el método de dirigir la propiedad específica de Microsoft Office, mso-font-alt, con su system-font elegido a su bloque de declaración @font-face.

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

Esto le dirá a Outlook para MS Office que utilice por defecto la fuente de reserva asignada.

Donde encontrar fuentes web

Google Fonts

Hay un montón de servicios de fuentes web disponibles, pero Google Fonts es nuestro favorito. El servicio es totalmente gratuito y puedes descargar las fuentes web en tu ordenador si estás maquetando diseños en Adobe Photoshop, Sketch u otro software de diseño.

Typekit de Adobe

El popular servicio de suscripción de fuentes de Adobe ha sido poco útil para los diseñadores de correo electrónico en el pasado, ya que Typekit dependía de JavaScript para incrustar las fuentes. A partir de agosto de 2017, Typekit habilitó el uso de fuentes web utilizando solo CSS -sin necesidad de JavaScript- y eso abre las fuentes web encontradas en Typekit para su uso en el correo electrónico. Puede encontrar instrucciones detalladas sobre cómo añadir fuentes web de Typekit a sus correos electrónicos utilizando @import en la documentación de ayuda de Typekit.

Más servicios de fuentes web

Si busca aún más sitios web que ofrezcan fuentes web con licencia para su uso en el correo electrónico (en su mayoría de pago), consulte algunos de los servicios siguientes:

• MyFonts
• Tipo comercial
• Font Spring
• Tienda de fuentes
• Trabaja para ellos
• Village
• Process Type Foundry

Licencia de fuentes web en el correo electrónico

Las fuentes web fueron diseñadas originalmente para ser utilizadas únicamente en sitios web, por lo que su licencia es normalmente para su uso sólo en sitios web y aplicaciones móviles. La razón por la que muchos servicios de fuentes web no permiten su uso en el correo electrónico es porque se considera que se distribuye la fuente, lo que va en contra de muchos de los acuerdos de licencia de usuario final (EULA) de los servicios.

Los proveedores de fuentes web de la lista anterior incluyen licencias de uso de fuentes web en el correo electrónico. Sin embargo, muchas licencias se cobran en función del número de aperturas mensuales, lo que debe tenerse en cuenta al utilizar un servicio de fuentes web de pago.

¿Puedo utilizar fuentes web?

No hay absolutamente ningún inconveniente en utilizar fuentes web como una mejora progresiva en sus correos electrónicos ahora mismo. Implemente sus fuentes de reserva correctamente y empuje su correo electrónico hacia el futuro.

Vale la pena echar un vistazo a su base de suscriptores para ver cuántos están viendo sus correos electrónicos en un cliente de correo electrónico que soporta fuentes web. Si la mayoría no lo hace, simplemente no valdría la pena su tiempo y esfuerzo, especialmente si está considerando utilizar una fuente web de pago.

Fuentes web bien hechas

Para darle un poco de inspiración sobre lo que es posible, aquí están algunos de nuestros correos electrónicos favoritos con fuentes web.

No te olvides de probar

Como el uso de fuentes web en el correo electrónico todavía se considera ligeramente experimental, te recomendamos que pruebes a menudo, especialmente si has implementado fuentes web en plantillas que pueden no actualizarse regularmente. Los cambios y las actualizaciones de las capacidades de representación de los clientes de correo electrónico no suelen anunciarse de antemano y pueden producirse de forma esporádica, por lo que es mejor realizar pruebas con regularidad.

Cabe destacar que si tienes la fuente web instalada en tu propio ordenador, podrás ver la fuente web cuando la pruebes en directo en un cliente de correo electrónico en tu ordenador, algo que debes tener en cuenta en caso de que de repente parezca que Gmail admite ahora las fuentes web.

Prueba la tipografía en tus campañas

¿Te animas a llevar tu juego tipográfico al siguiente nivel? Asegúrate de probar tus campañas antes de enviarlas. Pruebe Litmus de forma gratuita y asegúrese de que su tipografía tiene un aspecto increíble en más de 90 clientes de correo electrónico, incluidos el escritorio, el correo web y los dispositivos móviles.

Aprenda más →