Fuentes web: cómo hacer que funcionen perfectamente en el correo electrónico

Publicado: 2021-04-24

De mi estudio muy científico (observé a mi hija cuando comenzó a escribir informes durante el año pasado), he aprendido que uno de los primeros aspectos del diseño con los que la gente comienza a jugar es la tipografía. Cuando comienza a escribir informes, pasa horas tratando de averiguar cuál es la mejor fuente para usar. Ok, quizás no horas, pero la mayoría de la gente dedica un poco de tiempo a eso. Porque, como saben las grandes marcas, la tipografía importa. Y es importante en el correo electrónico.

Pero la accesibilidad también importa. Así que deje de atrapar su mensaje en imágenes y comience a usar texto en vivo con fuentes web seguras y fuentes web en su lugar. Después de todo, el texto que no depende de imágenes y puede ser leído por un público más amplio conduce a una gran experiencia de suscriptor. Y como sus mejores clientes, el correo electrónico devuelve $ 36 por cada $ 1 invertido, eso es excelente para su estrategia general de marketing.

En esta publicación de blog, desglosaré:

Fuentes web frente a fuentes seguras para la web
Los beneficios de las fuentes web
Licencia y soporte al cliente de correo electrónico
Dónde encontrar fuentes web
Codificándolos en correos electrónicos
Grandes ejemplos de fuentes web en correo electrónico

Fuentes web frente a fuentes seguras para la web

Hay dos formas diferentes de hacer texto en vivo: fuentes web seguras y fuentes web. Aunque suenan igual, hay diferencias definidas. Para comprender estas diferencias, echemos un vistazo a cómo funcionan las fuentes en sus correos electrónicos.

Cuando su correo electrónico está codificado, la fuente se declara utilizando una propiedad CSS llamada font-family. Esta propiedad de familia de fuentes puede tener un solo nombre de fuente o varios nombres de fuente, a menudo denominada pila de fuentes. La inclusión de varios nombres de fuente asegura que si una fuente no funciona, hay una fuente alternativa o de respaldo de su elección. Sin enumerar varios nombres de fuentes, el cliente de correo electrónico decide cuál es la fuente de respaldo. Cuando sus suscriptores abren su correo electrónico, el navegador lee la propiedad de la familia de fuentes y extrae la fuente para usar.

Fuentes seguras para la web

Con las fuentes seguras para la web, el navegador extrae la fuente de su directorio de fuentes local. Eso significa que estas son fuentes que ya están instaladas en su computadora. Todas las computadoras vienen con fuentes preinstaladas, y estas son las que se consideran seguras para la Web. Son seguros de usar, ya que hay una muy buena oportunidad su suscriptor tendrá ya ellos, también.

La desventaja es que hay un número limitado de fuentes seguras para la web en comparación con las fuentes web. Y se usan con bastante frecuencia, por lo que es menos probable que se destaque (si eso es lo que busca).

Las fuentes web seguras obvias son:

Arial
Helvética
Verdana
Georgia
Times New Roman

Pero hay varios otros que puede usar con cierto grado de confianza. Así que salga del bucle de fuentes estándar Arial o Helvetica y encuentre una fuente segura para la web que funcione para su marca.

El mejor recurso que he encontrado para fuentes web seguras son las fuentes CSS. Me encanta que incluyan un porcentaje de uso para PC y Mac para cada fuente, de modo que sepa aproximadamente cuántos de sus suscriptores podrían ver la fuente que desea y cuántos verán su respaldo en su lugar.

Fuentes web

Las fuentes web se extraen de un servidor, ya sea uno que aloje usted mismo o uno externo (como Google o Adobe). Debido a esto, la variedad de fuentes que se pueden usar es mucho mayor, y se pueden usar en cualquier computadora ... siempre que el navegador o el cliente de correo electrónico puedan incorporar la fuente. En algunos casos, es posible que su suscriptor ya tenga una fuente descargada e instalada en su máquina, por lo que estas fuentes funcionarán incluso en clientes de correo electrónico que no admiten fuentes web.

Entonces, si bien las fuentes web le brindan mucha más variedad y libertad creativa, tienen un costo: soporte limitado para el cliente de correo electrónico (en el que me sumerjo más adelante).

¿Por qué las fuentes web?

Entonces, podría preguntarse, ¿por qué molestarse con las fuentes web? Como especialista en marketing y diseñador, conoce la presión de mantenerse dentro de la marca en el correo electrónico con colores, diseño y, sí, tipografía. Las fuentes web le permiten mostrar su marca sin depender de imágenes para su texto.

Bloquear copias importantes en imágenes ha sido una práctica estándar en el diseño de correo electrónico como una forma de mantenerse en 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.

Ejemplo de correo electrónico de Ace Hardware de fuentes web con y sin imágenes — Correo electrónico con y sin imágenes cuando se usa una fuente web

Ejemplo de correo electrónico de Magic Spoon de fuentes web con y sin imágenes — Correo electrónico con y sin imágenes cuando se usa texto en imágenes

Y tener texto en tus imágenes perjudica la experiencia del suscriptor si tienen las imágenes desactivadas de forma predeterminada. Puede que esto no sea una gran parte de sus suscriptores, pero realmente no hay forma de saber si alguien tiene sus imágenes apagadas y abre su correo electrónico. Entonces, ¿por qué no brindar la mejor experiencia para la audiencia más amplia posible?

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

¿Puedo usar fuentes web en el correo electrónico?

Si aún no lo ha adivinado, ¡la respuesta es sí! Pero, como en todo lo relacionado con el correo electrónico, hay algunas advertencias.

Soporte al cliente de correo electrónico

Las fuentes web solo funcionan en algunos clientes de correo electrónico, y se debe tener cuidado para asegurarse de que cuando no sean compatibles, la fuente retroceda con elegancia.

Cliente de correo electronico	Soporte de fuentes web
Correo de Apple	✓ si
Outlook 2007-2016	✘ No
Outlook 2019	✘ No *
Outlook para Mac	✓ si
Outlook Office 365	✘ No *
Aplicación de Gmail	✘ No *
iOS	✓ si
Aplicación de Outlook	✘ No
Correo Samsung	✘ No *
Correo AOL	✘ No
Gmail	✘ No *
Oficina 365	✘ No
Outlook.com	✘ No
Yahoo! Correo	✘ No

* Tiene algunos resultados dudosos según el método de inserción de correo electrónico, que se explica más adelante.

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 admite fuentes web. Si hay suficientes suscriptores, entonces es una manera maravillosa de darle un toque adicional a su correo electrónico.

Si la mayoría no lo está, simplemente no valdría la pena su tiempo y esfuerzo, especialmente si está considerando usar una fuente web paga.

¿Qué clientes de correo electrónico utilizan sus suscriptores?

Descubra dónde sus suscriptores abren sus correos electrónicos y cómo interactúan con Litmus Email Analytics. Obtenga la información que necesita para optimizar sus correos electrónicos y más.

Más información →

Licencia

Las fuentes web se diseñaron originalmente para usarse únicamente en sitios web, por lo que sus licencias suelen ser para su uso solo en sitios web y aplicaciones móviles. La razón por la que muchos servicios de fuentes web no permitían su uso en el correo electrónico es porque se considera que distribuye la fuente, lo que va en contra del Acuerdo de licencia de usuario final (EULA) de muchos de los servicios.

Todos los proveedores de fuentes web con los que contactamos admitieron el uso de sus fuentes en el correo electrónico. Cada proveedor tenía una licencia diferente que se requería, por lo que no existe una forma estándar en la que las fuentes se licencian en el correo electrónico. Si está buscando usar una fuente, comuníquese con la empresa para averiguar exactamente cómo licencia sus fuentes.

Dónde encontrar fuentes web

Así que lo ha pensado todo y ha decidido que quiere probar las fuentes web. Con opciones aparentemente infinitas, puede encontrar las que se adapten a su marca. Pero también es importante tener en cuenta la accesibilidad.

Algunas fuentes son más fáciles de leer que otras.

Las fuentes ornamentadas o decorativas, como las fuentes de pantalla o de escritura a mano, pueden dificultar que las personas con discapacidad visual o dislexia puedan diferenciar entre las formas de las letras. Las fuentes Sans-serif (fuentes sin características extendidas o rizos en sus letras, como Arial, Calibri, Century Gothic o Helvetica) y las fuentes slab (fuentes con líneas más gruesas como Museo Slab y Rockwell) se consideran más accesibles.

Aquí hay algunos buenos lugares para comenzar a buscar.

Fuentes de Google

Hay muchos servicios de fuentes web disponibles, pero Google Fonts es nuestro favorito. El servicio es totalmente gratuito y puede descargar las fuentes web a su computadora si está creando diseños en Adobe Photoshop, Sketch u otro software de diseño.

Fuentes de Adobe

Typekit se ha convertido en Adobe Fonts a partir de octubre de 2018. Ahora son compatibles con el método <link> y @import para usar fuentes como fuentes web (más sobre esto a continuación). El servicio no es completamente gratuito, pero si ya tiene una suscripción a Creative Cloud, está incluido.

Servicios de fuentes web

Hay varios otros servicios de fuentes web disponibles de forma pagada. Deberá asegurarse de obtener la licencia correcta para usarlos en su correo electrónico.

Tipo Red (licencia web)
Fundición de tipo de proceso (licencia web)
Optimo (Licencia de anuncios digitales)
Fontspring (licencia de correo electrónico personalizada)
Typotheque (Licencia web)
Tipo de producción (licencia de publicidad online)
MyFonts (licencia web)
Tipo comercial (licencia web)

Con las licencias web, puede haber la opción de alojar la fuente usted mismo o de que el proveedor la aloje. En algunas licencias web, pagas por una cierta cantidad de visitas a la página con cada correo electrónico que carga la fuente contando como una vista de página, así que asegúrate de tenerlo en cuenta al comprar una licencia.

Cómo incrustar fuentes web en correos electrónicos

Debido a que las fuentes web normalmente no se encuentran en el dispositivo local de alguien y, en cambio, están alojadas en otro lugar, primero debe "incrustar" o importar su fuente web en sus correos electrónicos antes de poder usarlas.

1. Obtenga la URL de su archivo de fuente

Necesitará la URL de su fuente web para incluirla en su correo electrónico. Su servicio de fuentes web debe tener esta URL. Pero si está alojando el archivo de fuente usted mismo, obtenga la URL desde donde se encuentra la fuente web en su servidor. Asegúrese de que sea una URL pública y que no provenga de un servidor local. De lo contrario, sus suscriptores no podrán acceder a la fuente web y verán una fuente alternativa.

Si está utilizando Google Fonts, encontrar la URL es un poco complicado, pero no demasiado. Descubra cómo en el siguiente paso para el método de inserción @ font-face.

2. Importe la fuente web mediante uno de estos tres métodos

Hay tres métodos para incrustar fuentes web en el correo electrónico (y una advertencia que puede limitar el método que puede utilizar). Los tres métodos para incrustar su fuente son:

<enlace>
@importar
@Perfil delantero

Entonces, ¿por qué elegirías un método sobre otro?

El método @import difiere la carga de la fuente web que se está importando hasta que el HTML en el que está incrustado esté completamente cargado. Esto puede hacer que su fuente web tarde un poco más en aparecer en su correo electrónico, mientras se carga el resto del correo electrónico. 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 fuente web es particularmente grande.

Otra cosa a tener en cuenta al elegir un método a utilizar es lo que admite su ESP.

Puede crear un código hermoso que funcione en Litmus todo el día, pero si su ESP cambia su código, como sabemos que la mayoría de ellos hacen, nada de lo que haga importará. Asegúrese de que su ESP no cambie su código de una manera que haga que sus fuentes dejen de funcionar. En Litmus, nuestro ESP no nos permite incluir condicionales de MSO en torno a elementos de estilo. Por lo tanto, los métodos <link> y @import no funcionarán para nosotros, ya que no son compatibles con Outlook, lo que discutimos más adelante.

Usando <link>

Usar el método <link> es un método relativamente simple para incrustar fuentes en su correo electrónico. Coloque esta línea de código en el <head> de su correo electrónico, cerca de la parte superior:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Usando @import

El método @import también es un método relativamente simple. Coloque esta línea de código en el <head> de su correo electrónico entre las etiquetas <style>:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Usando @ font-face

Los servicios de fuentes web en línea suelen ofrecer cinco formatos de archivo para elegir: .eot, .woff, .woff2, .svg y .ttf. Los formatos .woff y .woff2 tienen el mejor soporte cuando se trata de correo electrónico, por lo que sugerimos usar uno o ambos formatos cuando sea posible. El método @ font-face es el único método que le permite elegir específicamente qué formato de archivo desea importar, lo que lo convierte en el método más infalible para implementar fuentes web.

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

@font-face {
  	font-family: 'Roboto';
  	font-style: normal;
  	font-weight: 400;
  	src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	}

Si está utilizando Google Fonts, encontrar el código @ font-face no es lo más fácil, pero no es demasiado difícil.

Primero, debe encontrar la fuente que le gustaría usar en Google Font. Luego, elija el estilo que desea usar. Aparecerá un menú desplegable a la derecha.

googe_fonts

En el menú lateral, habrá una opción para <link> o @import. Ambos tendrán una URL (resaltada en la captura de pantalla anterior). Puede copiar esa URL y pegarla en la barra de direcciones de su navegador para encontrar la hoja de estilo CSS que utiliza Google.

google_font_api

Copia y pega la versión 'latina' de @ font-face entre tus etiquetas <style>.

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

Todo el mérito de este método de importación de fuentes web es para el defensor de la accesibilidad del correo electrónico Paul Airy, como se detalla en un boletín anterior de Type: E.

3. Elija la fuente alternativa adecuada

Cuando se utilizan fuentes web, es necesario disponer de una fuente alternativa segura para la web para aquellos clientes de correo electrónico que no admiten fuentes web.

Cada cliente de correo electrónico tiene una fuente predeterminada si la fuente que aparece en la pila de familias de fuentes no está disponible. Por ejemplo, Gmail usa Arial, Apple Mail usa Helvetica y Outlook usa Times New Roman. Si no le gusta el sonido de cualquiera de estas fuentes predeterminadas, tenemos buenas noticias: puede elegir su fuente alternativa cuando codifique en la pila de familias de fuentes (en el siguiente paso).

Elegir la fuente alternativa adecuada que conserve el diseño de su correo electrónico es clave para brindar una gran experiencia a todos sus suscriptores, sin importar qué cliente de correo electrónico estén usando.

Las fuentes alternativas deben ser del mismo tipo que la fuente web; utilice una fuente alternativa sans-serif si su fuente web es una fuente sans-serif y una fuente alternativa serif si su fuente web también es serif. Usar el mismo estilo de fuente ayudará a conservar el diseño de su correo electrónico en diferentes clientes de correo electrónico.

Puede ir un paso más allá analizando la altura x de las fuentes.

La altura x es la altura vertical de la fuente. Idealmente, debe elegir una fuente alternativa que tenga una altura x similar para evitar que el diseño de su correo electrónico se desmorone cuando la fuente alternativa esté en uso.

ejemplo de altura x comparando verdana, arial y proxima nova

Aquí hay 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 marcar la diferencia a la hora de crear o romper el diseño de su correo electrónico cuando las fuentes web no se están renderizando.

4. Utilice sus fuentes en el correo electrónico

Una vez que se importa su fuente web y se eligen sus alternativas, usarlas en el correo electrónico es tan fácil como usar una fuente segura para la web. Simplemente use el nombre de la familia de fuentes definido en el método de importación seguido de sus fuentes alternativas en el CSS en línea o en el encabezado:

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

Piense en esto como una lista priorizada de fuentes preferidas. Si un cliente de correo electrónico no puede cumplir con su elección número uno, volverá a la siguiente en su lista.

Por ejemplo, al usar 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. Entonces, la fuente renderizada será Verdana. Si Verdana no es compatible con el dispositivo utilizado (lo que sería muy raro ya que Verdana es una fuente segura para la web), el dispositivo usaría la fuente sans-serif predeterminada para su sistema, ya que esta es la tercera fuente de la lista.

5. Evite la imitación de negrita o cursiva falsa

Si tiene versiones adjuntas en negrita y cursiva de sus archivos de fuentes web, ¡usémoslas!

Los diseñadores de tipografía han pensado y esforzado mucho para conseguir que todos los estilos diferentes de una fuente sean los correctos , por lo que es una buena práctica aplicar el diseño de tipografía original en lugar de permitir que el cliente de correo electrónico o el navegador aplique al azar una negrita falsa o una cursiva falsa a la fuente regular.

Básicamente, NO hagas esto:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Al igual que en el diseño web, puede extraer las fuentes genuinas al incluir estos estilos en su pila @ font-face, así:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto-Italic'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto-BoldItalic'),   src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}

Como puede ver, los diferentes estilos incorporan diferentes fuentes independientemente de la familia de fuentes. De esta manera, si diseña su fuente en HTML de esta manera:

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

… ¡Entonces se incorporará la fuente genuina 'Roboto-BoldItalic' ! Del mismo modo, simplemente agregando font-weight: bold; introducirá 'Roboto-Bold' y simplemente agregará estilo de fuente: cursiva; introducirá 'Roboto-Italic' .

¡NO hagas esto tampoco!

Por lo tanto, es posible que se esté preguntando: ¿por qué hacerlo de esta manera en lugar de declarar una familia de fuentes diferente para cada estilo, que también atrae las fuentes genuinas? Así es como se ve eso:

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

Esto presenta un problema. El uso de nombres de familias de fuentes para almacenar estilos no solo crea CSS excesivamente complicado y redundante, sino que también elimina el estilo del texto si sus alternativas se activan. Por ejemplo, si está viendo el código anterior en Gmail (que no t admite fuentes web personalizadas), entonces solo verá Verdana sin negrita ni cursiva en lugar de Roboto Bold Italic .

Al mantener su familia de fuentes y sus pesos de fuente o estilos de fuente separados, sus fuentes alternativas aún conservarán el estilo correcto.

6. Use una solución para Outlook

Outlook tiene una peculiaridad maravillosa que querrás tener en cuenta. Especialmente si eso es lo que usan muchos de sus suscriptores.

Vea cómo se ven sus correos electrónicos en Outlook y más

Cada cliente de correo electrónico tiene sus peculiaridades. Afortunadamente, puede verlos en sus correos electrónicos antes de presionar enviar, con las vistas previas de correo electrónico de Litmus. No más correos electrónicos rotos.

Aprende cómo →

Si usa el método <link> o @import, todo lo anterior a Outlook 2019 mostrará Times New Roman independientemente de las alternativas que coloque para su fuente.

La solución más simple para esto es usar el método @ font-face. Pero si necesita utilizar el método <link> o @import, utilice los condicionales de Microsoft Office (MSO) para comentar esa sección de sus estilos. Esto evitará que Outlook los vea, y usará sus fuentes de respaldo como estaba previsto:

Sin condicionales MSO	Con condicionales MSO
`<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Pero espere un minuto. Acabo de decir todo antes de Outlook 2019. Entonces, ¿qué sucede en Outlook 2019 (y Outlook Office 365)? Bueno, en esos clientes de correo electrónico, Outlook recurre a su respaldo incluso sin los condicionales de MSO.

Sin condicionales MSO	Con condicionales MSO
`< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

De hecho, en esos clientes, @import parece funcionar. ¿Pero lo es realmente? Lo probamos con otras fuentes y los resultados estuvieron a la par de lo que esperarías de Outlook:

probar fuentes web en Outlook

Parece que a veces pone una fuente del sistema en lugar de las fuentes que especifica. Y en el caso de Montserrat, no estoy muy seguro de lo que está pasando allí, pero eso no es Montserrat. De hecho, se parece más a Lato. Entonces, parece que Outlook está intentando admitir fuentes web, pero aún no lo ha hecho. Definitivamente es algo a lo que estar atento en el futuro.

Mientras tanto, por las razones anteriores, y porque no puede apuntar solo a Outlook 2019, es mejor usar @ font-face u ocultar sus declaraciones de <link> o @import.

Si encuentra que Outlook convierte su fuente a Times New Roman, puede agregar mso-font-alt: 'Arial'; al bloque @ font-face para proporcionar un respaldo alternativo para Outlook:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Otra solución que podría utilizar es codificar la familia de fuentes con la pila de fuentes segura para la web en línea e incluir un bloque <style> para anular las fuentes con la fuente web. Entonces es solo cuestión de ocultar ese bloque de estilo de Outlook:

<!--[if (gte mso 9)|(IE)]><!-->
 p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }
<!--<![endif]-->
style="font-family: Verdana, Helvetica, sans-serif;"

7. Utilice también una solución para Gmail (es broma, no hay ninguna)

Por lo tanto, es posible que se pregunte: "¿Qué pasa con Gmail? Estamos utilizando fuentes de Google, después de todo “.

Uno pensaría que como Gmail es un producto de Google y Google Fonts es un producto de Google, funcionarían bien juntos. Pero, por desgracia, ese no es el caso.

Las fuentes web no funcionan en Gmail incluso si son fuentes de Google e incluso si usa el código proporcionado por Google. La única excepción para esto es Roboto:

Usar diferentes fuentes de Google	Usando diferentes métodos de incrustación

Y, de hecho, en la aplicación Gmail Mail en Android, todas las fuentes sans-serif recurren a Roboto:

Usar diferentes fuentes de Google	Usando diferentes métodos de inserción

Algo de inspiración para empezar

Muy bien, ¿quién está listo para ver un par de ejemplos asombrosos de marcas que usan fuentes web en el correo electrónico de la manera correcta?

Ace Hardware usó fuentes web donde son compatibles, pero eligió Rockwell como fuente de reserva para garantizar que el correo electrónico aún se vea en la marca en otros clientes de correo electrónico.

Con fuentes web	Con retrocesos

Webflow usa fuentes del sistema como respaldo para sus fuentes web y usa pesos de fuente para garantizar una excelente experiencia tipográfica sin importar la fuente que aparezca.

correo electrónico de flujo web

Manténgase en la marca y sin errores

Las fuentes web son una excelente manera de mantener el texto de sus correos electrónicos tanto de marca como accesible. Pero como puede ver en esta publicación, hay muchos matices a considerar. Por eso es igualmente importante ...

¡Esté siempre probando!

Hemos hecho todo lo posible para probar un montón de circunstancias diferentes, pero su ESP puede distorsionar su código de una manera inesperada. Asegúrese de probar sus correos electrónicos antes de enviarlos para asegurarse de que todos sus resguardos funcionen correctamente.

Prueba de control de calidad de las fuentes web en sus correos electrónicos

Lo hiciste bien? Descúbrelo con una prueba gratuita de Litmus. Obtenga una vista previa de cómo se ven sus correos electrónicos en más de 90 clientes, aplicaciones y dispositivos de correo electrónico. Y mantenga la reputación de su marca con correos electrónicos impecables.

Inicie su prueba gratuita de Litmus →

Vale la pena agregar fuentes web como una gran mejora progresiva para ayudarlo a brindar la mejor experiencia a sus suscriptores en sus bandejas de entrada. ¡Divertirse! Y háganos saber si tiene alguna pregunta o comentario a continuación.

Publicado originalmente el 11 de abril de 2019 por Jaina Mistry. Última actualización 23 de abril de 2021.

¡Comparte, gracias!

La mejor manera de codificar colores de fondo y degradados de correo electrónico HTML

Aprenda la mejor manera de codificar un color de fondo y degradados de correo electrónico HTML con los consejos que necesita para que funcionen para Outlook, Gmail, Modo oscuro y más.

Lee mas

Usted preguntó, nuestros expertos en correo electrónico respondieron: grabación de seminarios web + preguntas y respuestas

Consulte la grabación de nuestro seminario web y las preguntas y respuestas, donde los expertos en correo electrónico respondieron las preguntas candentes de la comunidad de correo electrónico.

Lee mas

Árbol de decisiones: ¿Realmente necesito realizar una prueba de control de calidad en este correo electrónico? [Infografía]

¿No sabe si debe o no probar el control de calidad de su correo electrónico? Creamos un árbol de decisiones útil para ayudarlo a decidir.

Lee mas

Una instantánea del panorama de los proveedores de servicios de correo electrónico

Vea qué proveedores de servicios de correo electrónico son más populares entre sus pares y eche un vistazo a la larga lista de herramientas de software de correo electrónico en el mercado actual.

Lee mas

Cómo migrar ESP fácilmente

Es hora de comenzar el proceso de migración. ¡Tienes esto! A continuación se ofrecen algunos consejos que le ayudarán a que el proceso de migración sea lo más sencillo y sin dolores de cabeza posible.

Lee mas