Advertisement
  1. Web Design
  2. Email

La guía completa para implementar fuentes web en el correo electrónico

by
Read Time:12 minsLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

¿Cuándo una fuente web no es una fuente web? ¡Cuando es una fuente para correo electrónico! En este tutorial, te explicaré paso a paso cómo implementar fuentes web en tus campañas de correo electrónico.

Fuentes web y fuentes seguras para la Web

Las fuentes seguras para la Web, como Arial y Trebuchet, Times y Georgia, están instaladas en la mayoría de los sistemas operativos. Como tal, estas «fuentes del sistema» se desplegarán en todo el software de esos sistemas operativos, incluidos los clientes de correo electrónico, los clientes de correo web, las aplicaciones y los navegadores, por lo tanto se clasifican como «seguras para la Web».

No obstante, esa seguridad tiene un costo. Esas características ubicuas provocan que los correos electrónicos diseñados y desarrollados con ellas tengan menos probabilidades de destacar en la bandeja de entrada.

rockinsodarockinsodarockinsoda
¡La fuente web Rockinsoda tiene bastante carácter!

Lo que hacen las fuentes personalizadas es destacar en la bandeja de entrada. Sus características únicas les dan un toque distintivo frente a sus contrapartes seguras para la web y a los correos electrónicos que las utilizan. Por esa misma razón, las marcas usan fuentes web, a veces invirtiendo en la creación de fuentes web personalizadas para destacar aún más. Desafortunadamente, a diferencia de las fuentes web seguras, las fuentes web no se visualizarán en la mayoría de los clientes de correo electrónico, clientes de correo web y aplicaciones. De hecho, en muy pocos de ellos.

Sin embargo, esto no te impide, ni debería impedirte, utilizar fuentes web en tus correos electrónicos. ¡Para nada! Necesitas saber qué clientes de correo electrónico, clientes de correo web y aplicaciones muestran fuentes web, qué formatos de fuente web hay que usar (sí, existe más de uno), dónde obtener fuentes web y cómo implementarlas en tus correos electrónicos. ¡En este tutorial, te ayudaré a hacer precisamente eso!

Clientes de correo electrónico, clientes de correo web y aplicaciones que mostrarán fuentes web

Debido a que las fuentes web no son seguras para la web, debes asegurarte qué clientes de correo electrónico, clientes de correo web y aplicaciones las mostrarán. La mayoría de ellos se encuentran en los sistemas operativos de Apple, Microsoft Outlook y Thunderbird en macOS, Mail en macOS, Mail en iOS y Mail en iPadOS.

Al momento de redactar este artículo, de acuerdo al informe de participación de mercado de clientes de correo electrónico de Litmus, más del 50% de los correos electrónicos del mundo se abren en estos cuantos clientes de correo electrónico, clientes de correo web y aplicaciones. Por lo tanto, sin duda vale la pena invertir tiempo y esfuerzo en implementar fuentes web para mostrarlas en ellos.

Email Client Market Share, March 2021.Email Client Market Share, March 2021.Email Client Market Share, March 2021.
Cuota de mercado de clientes de correo electrónico, marzo de 2021.

Sin embargo, antes de apresurarte a implementar fuentes web, averigua si tus destinatarios están usando clientes de correo electrónico, clientes de correo web y aplicaciones que puedan mostrarlas. Es posible que más del 50% de tus destinatarios las utilicen, o tal vez menos. Herramientas como las que se encuentran en Litmus y Email on Acid te proporcionarán los datos que te lo indicarán.

Qué formatos de fuente web usar

Ahora que estás listo para implementar fuentes web en tus correos electrónicos, necesitas saber qué formatos utilizar. Este tipo de fuentes están disponibles en una variedad de formatos:

  • TrueType Font (TTF)
  • OpenType Format (OTF)
  • Embedded OpenType (EOT)
  • Web Open Font Format Font (WOFF)
  • Web Open Font Format Font 2 (WOFF2)
  • Scalable Vector Graphics (SVG)

Solo un formato se mostrará en los correos electrónicos: Web Open Font Format Font (WOFF).

Dónde conseguir tus fuentes web

La procedencia de tus fuentes web dependerá de tu presupuesto y de tu deseo de ser distintivo o exclusivo. Básicamente, hay tres opciones:

  • Gratuitas: es muy probable que veas este tipo de fuentes en los correos electrónicos de otras marcas
  • Con licencia: este tipo de fuentes es menos probable que las veas en los correos electrónicos de otras marcas                                    
  • Personalizadas: estas fuentes seguramente no las verás en los correos electrónicos de otras marcas

Gratuitas: Google Fonts

Google Fonts ofrece cientos de familias de fuentes gratuitas y de código abierto, por lo que no es de extrañar que sea la fundición tipográfica a la que acuden muchas marcas.

Por lo tanto, es más probable que veas a más de una marca utilizando la misma «Google Font» en sus correos electrónicos, aunque no tantas como las que utilizan fuentes seguras para la Web. También verás algunas Google Fonts en los productos de Google. Roboto está instalada en Android y lo ha estado desde Android 4.0 (Ice Cream Sandwich).

Roboto, from Google Fonts.Roboto, from Google Fonts.Roboto, from Google Fonts.
Roboto, de Google Fonts.

Con licencia: Envato Elements

Si estás buscando fuentes web prémium a un precio económico, visita Envato Elements. Obtén acceso a una enorme biblioteca de fuentes, todo por una tarifa mínima. Tienen licencia para uso comercial y profesional. Las descargas ilimitadas significan que puedes descargar tantas fuentes como desees. Utiliza el filtro de la biblioteca de fuentes y selecciona «Web Font», prueba varias y descarga las que te gusten.

Envato Elements Web FontsEnvato Elements Web FontsEnvato Elements Web Fonts
Disfruta de descargas ilimitadas en Envato Elements y su enorme biblioteca de fuentes web.

Pero Envato Elements es más que una impresionante colección de fuentes web. También incluye plantillas gráficas, imágenes de stock, audio, plantillas de WordPress y mucho más. Todo este increíble contenido profesional es con descargas ilimitadas.

Con licencia: Adobe Fonts

Adobe Fonts, anteriormente conocido como Typekit, ofrece miles de fuentes, aunque necesitarás una suscripción a Creative Cloud para utilizarlas. Incluyen fuentes conocidas como Baskerville y Futura y no tan conocidas, como Mrs Eaves XL y Fenwick.

A diferencia de otras licencias, la licencia de Adobe Font no limita el número de veces que se carga una fuente en una página web o en un correo electrónico en un mes determinado (visualización mensual de la página).

Mrs Eaves XL, from Adobe Fonts.Mrs Eaves XL, from Adobe Fonts.Mrs Eaves XL, from Adobe Fonts.
Mrs Eaves XL, de Adobe Fonts.

Con licencia: Typotheque

Typotheque se enorgullece de ser la «primera fundición tipográfica en introducir el concepto de fuentes web». Su fundador, Peter Biľak, ¡incluso ha escrito un artículo titulado Breve historia de las fuentes web! Typotheque ofrece licencias de fuentes web alojadas, en las que cargas tu fuente web desde sus servidores, y licencias autohospedadas, en las que cargas tu fuente web desde tus servidores.

Personalizadas/hechas a la medida

Si realmente deseas sobresalir en la bandeja de entrada, puedes optar por fuentes personalizadas o hechas a la medida. Evidentemente tienen un costo, pero como resultado, puedes estar seguro de que tendrás algo exclusivo.

Algunos ejemplos de fuentes personalizadas son «Virgin Money Sans», para Virgin Money, diseñada por Pentagram en colaboración con Nan, «Smiley Face», para AO, diseñada por DesignStudio en colaboración con F37 y «BBC Reith», para la BBC, diseñada por el equipo de Global Experience Language de la BBC en colaboración con Dalton Maag.

‘Virgin Money Sans’, for Virgin Money, designed by Pentagram in collaboration with Nan.‘Virgin Money Sans’, for Virgin Money, designed by Pentagram in collaboration with Nan.‘Virgin Money Sans’, for Virgin Money, designed by Pentagram in collaboration with Nan.
«Virgin Money Sans», para Virgin Money, diseñada por Pentagram en colaboración con Nan.
‘Smiley Face’, for AO, designed by DesignStudio in collaboration with F37.‘Smiley Face’, for AO, designed by DesignStudio in collaboration with F37.‘Smiley Face’, for AO, designed by DesignStudio in collaboration with F37.
«Smiley Face», para AO, diseñada por DesignStudio en colaboración con F37
‘BBC Reith’, for the BBC, designed by the BBC’s Global Experience Language team in collaboration with Dalton Maag.‘BBC Reith’, for the BBC, designed by the BBC’s Global Experience Language team in collaboration with Dalton Maag.‘BBC Reith’, for the BBC, designed by the BBC’s Global Experience Language team in collaboration with Dalton Maag.
«BBC Reith», para la BBC, diseñado por el equipo de Global Experience Language de la BBC en colaboración con Dalton Maag.

Cómo implementar fuentes web en tu correo electrónico

Para implementar fuentes web en tu correo electrónico hay tres pasos:

  1. Cargar tu fuente web en tu correo electrónico
  2. Estilizar el texto de tu correo electrónico con tu fuente web
  3. Implementar fuentes seguras para la Web como segunda opción para los casos en que tu fuente web no se muestre

1. Carga tu fuente web en tu correo electrónico

Para implementar una fuente web, primero tienes que cargarla, esto lo puedes hacer con @import, <link> o @font-face de CSS. Recomiendo la última (a menos que quieras que tu fuente web se muestre en Samsung Mail en Android 6.0 o en Samsung Mail en Android 7.0, en cuyo caso deberás utilizar <link>), ya que @import y <link> pueden ralentizar la renderización de tu correo electrónico.

@import y <link>

  • Con @import se incrementará el tiempo de renderización de tu correo electrónico, pues se carga tu fuente web en línea a medida que se carga tu HTML.
  • Al usar <link> se incrementará el tiempo de renderización de tu fuente web, pues espera a que se cargue tu HTML antes de cargarla. Sin embargo, con esto te permite añadir Samsung Mail en Android 6.0 y Samsung Mail en Android 7.0 a la lista de clientes de correo electrónico, clientes de correo web y aplicaciones que mostrarán tu fuente web.

Para utilizar @font-face de CSS, necesitas la URL de la hoja de estilo de la fuente web, la cual te proporcionará la fundición tipográfica cuando la selecciones. (por ejemplo, para Montserrat en Google Fonts sería: https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap) Cuando pegues esta URL en tu navegador, se te presentará la regla @font-face de CSS. La regla @font-face se verá de esta forma, que, en este caso, cargará la fuente Montserrat desde Google Fonts:

Recuerda, necesitas que tu fuente web sea WOFF, no WOFF2, o no se mostrará en tu correo electrónico, así que asegúrate de verificar el formato. Para Google Fonts, se requieren algunos pasos adicionales para obtener la fuente WOFF.

Some extra steps are required to implement a Google Font into your email.Some extra steps are required to implement a Google Font into your email.Some extra steps are required to implement a Google Font into your email.
Se necesitan algunos pasos adicionales para implementar una fuente de Google Fonts en tu correo electrónico.

Google Fonts

Se requieren los siguientes pasos adicionales para implementar una fuente de Google Fonts en tu correo electrónico, ya que al principio la URL de la hoja de estilo presenta una fuente WOFF2 en lugar de una fuente WOFF.

  1. Elige tu fuente en Google Fonts
  2. Selecciona + Select this style (+ Seleccionar este estilo)
  3. Selecciona <link> o @import
  4. Copia la URL de la hoja de estilo (p. ej. https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap)
  5. Pega la URL de la hoja de estilo en Google Chrome
  6. Ve a Herramientas para desarrolladores
  7. En el menú de Herramientas para desarrolladores, selecciona > More Tools > Network Conditions
  8. En User agent, desmarca Select automatically
  9. Selecciona Internet Explorer, 9, 10 u 11 y refresca el navegador hasta que WOFF2 cambie a WOFF en tu @font-face de CSS.
Copy the stylesheet URL.Copy the stylesheet URL.Copy the stylesheet URL.
Copia la URL de la hoja de estilo.
Select Internet Explorer, 9, 10 or 11 and refresh the browser until WOFF2 changes to WOFF in your @font-face CSS.Select Internet Explorer, 9, 10 or 11 and refresh the browser until WOFF2 changes to WOFF in your @font-face CSS.Select Internet Explorer, 9, 10 or 11 and refresh the browser until WOFF2 changes to WOFF in your @font-face CSS.
Selecciona Internet Explorer, 9, 10 u 11 y refresca el navegador hasta que WOFF2 cambie a WOFF en tu @font-face de CSS.

¡Tu regla @font-face de CSS ahora se verá así y estará lista para usar!

Pesos de fuente

Cuando la fuente que hayas elegido tenga varios pesos, utilízalos y cárgalos en tu correo electrónico. Para Montserrat, hay nueve pesos, cada uno designado con un número. Puedes usar el número para estilizar tu texto (por ejemplo, font-weight:600;). No los cargues todos, por supuesto, solamente los que necesites para tu correo electrónico. Como mínimo, necesitarás un peso «regular» y un peso «bold».

2. Estiliza el texto de tu correo electrónico con tu fuente web

Estiliza el texto de tu correo electrónico con tu fuente web usando el CSS interno, aplicando una declaración !important para anular el CSS en línea.

Sugerencia: si tu fuente web no se renderiza, intenta eliminar las comillas del nombre de la familia de fuentes web (por ejemplo, font-family:Montserrat !important;).

¿Por qué utilizar CSS interno en lugar de CSS en línea?

En cada uno de los clientes de correo electrónico y las aplicaciones que muestran fuentes web, existe soporte para CSS interno además de CSS en línea. Este soporte para CSS interno hace que estilizar el texto, con fuentes web, en tu correo electrónico sea razonablemente sencillo.

3. Implementa una fuente segura para la Web como segunda opción

Siempre es una buena idea implementar como alternativa una fuente segura para la Web para mostrarla en los dispositivos que no admitan tu fuente web. Esta fuente debe ser similar a la fuente web en su ancho, peso y altura de la x para que el texto fluya visualmente de la misma forma. En este ejemplo, Montserrat recurrirá a Century Gothic, que, a su vez, recurrirá a la fuente sans-serif predeterminada.

Montserrat (Left) and Century Gothic (Right) have very similar x-heights.Montserrat (Left) and Century Gothic (Right) have very similar x-heights.Montserrat (Left) and Century Gothic (Right) have very similar x-heights.
Montserrat (izquierda) y Century Gothic (derecha) tienen alturas de la x muy similares.
Gill Sans (Left) and Trebuchet MS (Right) have very different x-heights.Gill Sans (Left) and Trebuchet MS (Right) have very different x-heights.Gill Sans (Left) and Trebuchet MS (Right) have very different x-heights.
Gill Sans (izquierda) y Trebuchet MS (derecha) tienen alturas de la x muy diferentes.

Microsoft Outlook

Algunas versiones de Microsoft Outlook ignorarán la fuente segura para la Web que has configurado como segunda opción y, en lugar de ella, mostrarán el texto que hayas estilizado con tu fuente web en Times New Roman. Hay varias formas para evitar que esto suceda. El método que utilices dependerá si has usado la regla @font-face de CSS o si has usado el elemento <link> para cargar tu fuente web.

Si has utilizado la regla @font-face de CSS, envuelve @font-face dentro de una media query @media screen:

Si has utilizado el elemento <link> para cargar tus fuentes web, deberás cancelar el estilo de la fuente web para cada elemento tipográfico en tu correo electrónico (por ejemplo, <h1>, <p>). Esto se puede lograr mediante el uso de CSS interno, envuelto en los Comentarios condicionales de Microsoft para dirigirte a Microsoft Outlook, implementando tus fuentes alternativas y aplicando una declaración !important para anular el estilo de la fuente web:

Visualizar tu correo electrónico en el navegador

Aunque la compatibilidad con WOFF es firme, quizá debas incluir formatos adicionales para asegurarte de que tu fuente web se mostrará en el navegador de tu destinatario.

Adobe Fonts entrega WOFF, WOFF2 y OTF «listas para usar», y ya hemos visto que de Google Font puedes obtener la regla @font-face de CSS tanto para WOFF como para WOFF2, siguiendo los pasos que describí anteriormente. Al momento de escribir este artículo, también puedes obtener el formato EOT cambiando el agente de usuario a Internet Explorer 8 y el formato SVG cambiando el agente de usuario a Opera Mini-iOS.

Con las fuentes web, las campañas de correo electrónico cobran vida

Cuando implementas fuentes web, tus campañas de correo electrónico realmente cobran vida. A continuación, se muestran tres ejemplos de correos electrónicos con fuentes web gratuitas, con licencia y personalizadas, respectivamente.

Antler email, with Google Font, ‘Roboto’ implemented.Antler email, with Google Font, ‘Roboto’ implemented.Antler email, with Google Font, ‘Roboto’ implemented.
Correo electrónico de Antler con la fuente «Roboto» de Google Fonts.
LEGO email, with licensed font, ‘Cera Pro Medium’ implemented.LEGO email, with licensed font, ‘Cera Pro Medium’ implemented.LEGO email, with licensed font, ‘Cera Pro Medium’ implemented.
Email de LEGO implementando la fuente con licencia «Cera Pro Medium».
AO email, with bespoke font, ‘Smiley Face’ implemented.AO email, with bespoke font, ‘Smiley Face’ implemented.AO email, with bespoke font, ‘Smiley Face’ implemented.
Correo electrónico de AO, con la fuente personalizada «Smiley Face».

Has añadido fuentes personalizadas a tu correo electrónico

¡Así es como se implementan fuentes web en el correo electrónico! Asegúrate de probar el email en el que la hayas aplicado, comprobando que se muestre donde se espera y que la fuente alternativa también se muestre como se esperaba, particularmente en las versiones de Microsoft Outlook.

Pero la experiencia de las fuentes web no termina ahí. Si usas fuentes web en tus páginas de aterrizaje, podrás aprovechar los beneficios de crear una marca consistente online para tus destinatarios mientras continúan su viaje en línea.

Aprende más sobre las fuentes web

Si eres nuevo en el diseño tipográfico y en especial en las fuentes web, échale un vistazo a algunos de nuestros tutoriales introductorios:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.