Los diseñadores de correo electrónico de todo el mundo pierden el sueño por este tema frustrante: las fuentes.
La web moderna ha recorrido un largo camino en términos de cómo ayuda a los diseñadores a aprovechar una tipografía hermosa y de marca para experiencias web y móviles.
Pero el canal de correo electrónico se ha quedado atrás durante años.
Esta publicación explora el ámbito de lo que es posible actualmente cuando se utilizan fuentes web para el diseño de marketing por correo electrónico, estrategias alternativas para crear experiencias de marca y los datos más recientes sobre soporte de clientes de correo electrónico para fuentes personalizadas.
Entremos en ello.
¿Qué son las fuentes web?
Las fuentes web son fuentes personalizadas que se utilizan en páginas web y en correos electrónicos para crear una apariencia consistente en todos los dispositivos y navegadores.
Históricamente, los diseñadores sólo podían utilizar una pequeña cantidad de fuentes “seguras para la web” que estaban preinstaladas en la mayoría de las computadoras. Esto dificultó el diseño de experiencias de marca coherentes en la web, los dispositivos móviles y otros canales de marketing. Las fuentes seguras para la web a menudo parecen menos refinadas que las fuentes web personalizadas.
Si bien las fuentes web se han convertido en una forma popular de crear diseños únicos y atractivos en sitios web, tienen un soporte limitado en el canal de correo electrónico. Esto se debe a que los clientes de correo electrónico tienen distintos niveles de compatibilidad con fuentes web y muchos clientes de correo electrónico antiguos no las admiten en absoluto.
Sin embargo, algunos clientes admiten fuentes web, como Apple Mail, Outlook para Mac, Thunderbird y Android Mail.
Si aún desea utilizar fuentes web en su marketing por correo electrónico, hay algunas opciones a considerar y exploraremos cada una de ellas más profundamente en la publicación a continuación.
Fuentes web frente a fuentes seguras para la web
Hay dos tipos de fuentes que puede utilizar en sus correos electrónicos: fuentes seguras para la web y fuentes web.
Estas dos categorías de fuentes se establecieron originalmente para navegadores web. Sin embargo, la mayoría de los navegadores modernos son compatibles con las fuentes web.
Desafortunadamente, los clientes de correo electrónico han tardado bastante en implementar la compatibilidad con fuentes web. Esto significa que debes adoptar un enfoque estratégico para elegir qué fuentes de correo electrónico utilizar.
Por eso es importante distinguir entre fuentes web y fuentes seguras para la web.
Fuentes seguras para la web
Las fuentes seguras para la Web son fuentes que se incluyen con la mayoría de los sistemas operativos. Los correos electrónicos con fuentes seguras para la web simplemente llaman a la fuente que necesitan del sistema operativo del destinatario del correo electrónico cuando se carga el correo electrónico.
Y, dado que la mayoría de los sistemas operativos tienen estas fuentes, lo más probable es que su correo electrónico se muestre perfectamente. Si se pregunta qué fuentes son seguras para el correo electrónico, la respuesta corta es las fuentes seguras para la web.
Es “más seguro” utilizar estas fuentes si desea asegurarse de que su correo electrónico se muestre como se esperaba. Por eso se les llama “fuentes seguras para la web”.
Sin embargo, no todas las fuentes seguras para la web son iguales. Algunas fuentes seguras para la web son menos seguras que otras porque no son compatibles con algunos sistemas operativos.
Por ejemplo, Avant Garde se considera una fuente segura para la web. Pero es compatible con menos del uno por ciento de las instalaciones de Mac OS y el cero por ciento de las instalaciones de Windows.
Cubriremos las mejores fuentes para correo electrónico en breve. Pero puedes ver qué sitios web seguros tienen el mejor soporte para sistemas operativos en Fuentes CSS.
fuentes web
Las fuentes web, por otro lado, se recuperan de un servidor cuando se carga el correo electrónico. Sin embargo, obtener la fuente de un servidor no es el principal problema de las fuentes web.
El principal problema es que muchos clientes de correo electrónico no admiten fuentes web.
Pero hay muchas más fuentes web que fuentes seguras para la web. De hecho, hay tantas que las fuentes web se denominan comúnmente “fuentes personalizadas” (nos referiremos a las fuentes web como fuentes personalizadas siempre que sea necesario para mayor claridad).
El método tradicional para utilizar fuentes web era poner su fuente web favorita en una imagen. Luego coloque esa imagen en su correo electrónico. Desafortunadamente, esto puede causar terribles problemas de visualización si una imagen no se carga.
El lado positivo es que existen formas de utilizar fuentes web en sus correos electrónicos. Pero simplemente utilizar la mejor implementación de fuentes web no es suficiente. Como mencionamos anteriormente, debes ser estratégico en la selección de fuentes.
¿Cuáles son las mejores fuentes para correo electrónico?
La mejor estrategia para usar fuentes en sus correos electrónicos es crear sus correos electrónicos para que se muestren correctamente con una fuente segura para la web y ver las fuentes personalizadas como una mejora. De esa manera, su correo electrónico se verá genial, independientemente de si el destinatario utiliza o no un cliente de correo electrónico compatible con fuentes web.
La buena noticia es que existen bastantes fuentes seguras para la web. Por lo tanto, aún puede crear diseños únicos de marca y correo electrónico con solo fuentes seguras para la web.
Estas son algunas de las mejores fuentes para correo electrónico de la biblioteca de fuentes seguras para la web:
VerdanaTrabuquete MSarialCalibrítahomaTimes New RomanPalatinoGeorgialucida brillanteMensajero nuevoMáquina de escribir Lucida SansAbrir Sans (Gmail)Roboto (Gmail)
Estas son las mejores fuentes para correo electrónico porque están incluidas en la mayoría de Windows, Android, macOS y iOS instalaciones. Por lo tanto, es más probable que aparezcan en sus correos electrónicos.
Además, hay un mecanismo incorporado para usar fuentes web y utilizar de forma predeterminada una fuente segura para la web si el cliente de correo electrónico del destinatario no admite fuentes web. Gmail también presenta un caso especial. Cubriremos todo esto cuando hablemos de los aspectos prácticos del uso de fuentes web en el correo electrónico.
Primero, hay una razón por la cual usar fuentes web no es una mala idea.
¿Por qué utilizar fuentes web en sus correos electrónicos?
Si es mucho más probable que las fuentes seguras para la web se muestren correctamente en los correos electrónicos, ¿por qué utilizar fuentes seguras para la web? La razón principal es la marca.
Las empresas quieren que sus correos electrónicos se destaquen. Y usar fuentes web es una excelente manera de asegurarse de no utilizar las mismas fuentes en sus correos electrónicos que otra empresa.
Ésta es una razón perfectamente viable para utilizar fuentes web. Cuanto más puedas diferenciarte de la competencia, más atención recibirás. Y utilizar una fuente única y reconocible es una forma rentable de diferenciar sus correos electrónicos de otros correos electrónicos de marketing.
Por eso necesitas saber cómo utilizar fuentes web en el correo electrónico. Probablemente también por eso estás aquí.
Asi que aqui esta.
¿Cómo utilizar fuentes web en un correo electrónico?
La clave para utilizar fuentes web en el correo electrónico es asegurarse de que su fuente personalizada coincida con una fuente segura para la web en términos de tamaño, grosor de fuente y espaciado. Luego use la fuente segura para la web correspondiente como fuente alternativa (más sobre eso más adelante).
Cree sus correos electrónicos para que se muestren correctamente con ambas fuentes. De esa manera, tus correos electrónicos se verán bien, sin importar qué fuente aparezca.
Además, es importante tener en cuenta todos los idiomas que utiliza en sus correos electrónicos al elegir una fuente personalizada.
Esto no es un problema si solo envías correos electrónicos en inglés. Pero, si elige una fuente web que no tiene todos los caracteres especiales necesarios para mostrar un idioma (por ejemplo, el rumano tiene ă ș ț î â), sus correos electrónicos siempre volverán a utilizar una fuente segura para la web en ese idioma.
Esa es la explicación de alto nivel. A continuación se explica cómo utilizar fuentes web en el correo electrónico, paso a paso.
Soporte de cliente de correo electrónico para fuentes web
Incluso si crea sus correos electrónicos para que funcionen correctamente con fuentes seguras para la web,
Sigue siendo importante tener una idea de cuántos de tus suscriptores verán tu fuente personalizada.
Estos son los clientes de correo electrónico que admiten fuentes web:
Y aquí están nuestros datos más recientes de participación de mercado de clientes de correo electrónico en 2022:
Esto le da una idea aproximada de cuántos de sus suscriptores utilizan un cliente de correo electrónico compatible con fuentes web. Y le brinda una mejor comprensión de lo importante que es asegurarse de que sus correos electrónicos se muestren correctamente, incluso si su fuente personalizada no es compatible.
Cómo y dónde conseguir fuentes web
El primer paso es seleccionar una fuente. Hay muchos lugares para conseguir fuentes web. Pero lo más importante es asegurarse de obtener la licencia de fuente web correcta.
Licencia
La concesión de licencias es un gran problema con las fuentes web. Las violaciones de licencias pueden resultar costosas. Y el uso de fuentes web en el correo electrónico presenta una situación de licencia única.
Las fuentes web están diseñadas para usarse en sitios web. Y su licencia refleja eso. La mayoría de las licencias de fuentes web son para usar la fuente en sitios web y aplicaciones móviles.
El uso de fuentes web en el correo electrónico se considera distribución de fuentes, lo que va en contra del Acuerdo de licencia de usuario final (EULA) típico para licencias de fuentes web.
Puede utilizar fuentes web en el correo electrónico. Pero debe asegurarse de que su licencia para utilizar una fuente personalizada incluya el uso de la fuente en el correo electrónico. Es posible que deba comunicarse con el proveedor de fuentes web para obtener una licencia que incluya el uso de la fuente en el correo electrónico.
Estos son algunos proveedores de fuentes web que ofrecen licencias de correo electrónico para sus fuentes:
Una vez que tenga la licencia de correo electrónico adecuada (o licencias)puede incrustar fuentes web en sus correos electrónicos.
Incrustar fuentes web en correos electrónicos
Es relativamente fácil incrustar fuentes web en sus correos electrónicos. Hay algunas maneras de hacerlo. Y normalmente no hay ni siquiera una tonelada de código que escribir.
Así es como funciona.
Obtenga la URL de su archivo de fuente
En la mayoría de los casos, su fuente web estará alojada en la web. Y se recupera de la web cuando se carga su correo electrónico.
También puedes alojar una fuente web en tu propio servidor. Pero tendrás que usar una URL pública, incluso si alojas la fuente web que deseas en tu propio servidor.
Breve historia: necesitará una URL, independientemente de dónde obtenga su fuente web.
Importe fuentes web de una de tres formas
Una vez que tenga su URL, deberá conectarla a uno de los tres métodos de importación de fuentes web.
1.
es el método de importación que utilizamos con más frecuencia aquí en . Eso es porque es rápido y sencillo.
Para importar una fuente con , coloque el comando con la URL de su fuente cerca de la parte superior del correo electrónico.
como esto:
Reemplace la URL en este ejemplo (https://fonts.googleapis.com/css2?family=Roboto&display=swap) con la URL de su fuente web.
2. @importar
El método @import es tan simple como el método. Coloque esta línea de código entre
Nuevamente, reemplace la URL en este ejemplo (https://fonts.googleapis.com/css2?family=Roboto&display=swap) con la URL de su fuente web.
3. @font-face
@font-face es el método más complejo para importar fuentes web.
Pero es el único método de importación que le permite elegir qué formato de archivo importar (.woff, .woff2, .svg, .eot y .tff). .woff y .woff2 son los formatos de archivo de fuentes web más comunes porque tienen el mejor soporte en el correo electrónico.
Y @font-face le permite especificar qué formato de archivo importa, lo que puede brindarle la mejor oportunidad de que su fuente web se muestre correctamente en sus correos electrónicos, en lugar de usar su fuente alternativa.
El código de importación @font-face se ve así:
Como puede ver, necesita un poco más de información sobre su fuente para utilizar el método de importación @font-face. Puede encontrar la información que necesita en la hoja de estilos CSS de la fuente web que está utilizando.
Si utiliza fuentes de Google, obtener esta información es bastante fácil.
Vaya a Google Fonts. Elija la fuente que desee. Haga clic +Selecciona este estilo
Esto abrirá una ventana emergente con algún código. Deje el método seleccionado. Copie la URL de la fuente web.
Pegue esa URL en la barra de direcciones de su navegador. Esto lo llevará a la hoja de estilos CSS de la fuente. Copie el fragmento de código /* latin */.
Pegue el fragmento de código @font-face entre
Esto importará la fuente web con el formato de archivo y las características de fuente correctas (estilo, peso, visualización).
Luego hay otro aspecto de la importación de fuentes usando @font-face: aplicar estilos de negrita y cursiva.
Aplique estilos de negrita y cursiva de la forma correcta
La explicación breve es que la mejor manera de utilizar negrita y cursiva con el método de importación @font-face es importar las versiones en cursiva y negrita de su fuente web, en lugar de permitir que el cliente de correo electrónico aplique los estilos de cursiva y negrita.
Esto crea una pila de importación @font-face que especifica la URL para cada estilo.
Tendrás que seguir las instrucciones para encontrar el fragmento @font-face en la hoja de estilo para las versiones en negrita y cursiva del…