Fuentes en correos electrónicos

Objetivos del artículo

Obtén información sobre las oportunidades y limitaciones de usar fuentes en línea, y cómo enviar correos electrónicos que se alineen con la marca.

Cómo funcionan las fuentes

Las fuentes son representaciones de texto y se pueden usar en medios impresos o en línea. Es posible que conozcas algunas de las fuentes más comunes, como Arial o Times New Roman, pero hay miles de otras fuentes que puedes usar para comunicar y representar tu marca.

Con los medios en línea (como sitios web o correos electrónicos), las opciones de fuente son prácticamente ilimitadas. Sin embargo, cuando compartes tu creación con otra persona, puede que no se vea exactamente igual, porque no todos los dispositivos tienen acceso a las mismas fuentes.

Hay 2 formas principales en que un dispositivo puede acceder y usar una fuente: fuentes del sistema (es decir, fuentes almacenadas en el dispositivo que estás usando) y fuentes web (es decir, fuentes cargadas desde un servidor externo)

Acerca de las fuentes del sistema

Las computadoras y los teléfonos vienen precargados con una variedad de fuentes. Hay algunas fuentes que se instalan comúnmente (la mayoría de los dispositivos vienen con Georgia y Verdana, por ejemplo), pero lo que incluyen de forma predeterminada puede variar mucho según el dispositivo. Las fuentes que usa la mayoría de los dispositivos se llaman fuentes “seguras para la web”.

Acerca de las fuentes web

A diferencia de las fuentes seguras para web, las fuentes web se cargan desde un servidor externo al mismo tiempo que el contenido que estás viendo. Las fuentes personalizadas generalmente son fuentes web. Si usas una fuente web, también querrás configurar una fuente segura para web de respaldo, en caso de que un dispositivo específico no pueda cargar tu fuente web.

Acerca de las fuentes alternativas

Cuando ves cualquier cosa en línea, ya sea una página web o un correo electrónico, hay CSS (código que se usa para dar estilo al contenido en línea) detrás de escena que le indica al dispositivo qué fuente mostrar. Si tu dispositivo no puede acceder a la fuente, revisará el CSS para buscar una “fuente de respaldo” (una fuente o fuentes seleccionadas por la persona que creó el sitio web o el mensaje de correo electrónico, que se usarán en caso de que la fuente preferida no estuviera disponible). Las fuentes de respaldo deben ser fuentes seguras para la web que la mayoría de los dispositivos puedan usar. Te dan más control sobre cómo se ve tu mensaje cuando alguien lo visualiza en un dispositivo que no admite fuentes personalizadas/de la web.

Si no hay una fuente de respaldo disponible, o si la fuente de respaldo no es compatible con el dispositivo que se está usando, entonces el dispositivo usará una fuente predeterminada, como Arial o Times New Roman. Las fuentes predeterminadas varían ampliamente entre dispositivos y apps.

Cómo funcionan las fuentes en el correo electrónico

Algunos clientes de correo electrónico son compatibles con fuentes web, pero otros no. Cuando alguien abre tu correo electrónico en una bandeja de entrada o un dispositivo que no es compatible con fuentes web, verá una fuente predeterminada en su lugar. Puedes controlar qué fuentes del sistema se usan como respaldo al configurar una fuente de reserva.

Si alguien abre tu correo electrónico en un dispositivo compatible con fuentes web, se cargará la fuente desde la URL proporcionada en el CSS de tu correo electrónico. Si el dispositivo puede acceder a la fuente, la mostrará; de lo contrario, pasará a las fuentes de respaldo.

La compatibilidad con las fuentes web depende de la aplicación de correo electrónico, su versión y el tipo de cuenta de correo electrónico. Algunos ejemplos de clientes con compatibilidad con fuentes web incluyen:

• Apple Mail
• iOS Mail (la app de correo electrónico predeterminada en iOS)
• Algunas apps de correo electrónico para Android (la compatibilidad varía según la app; Android 2.3 no admite el método @import que utilizan las fuentes de Google y Adobe)
• Samsung Email en Android, excepto cuando se usa una dirección de correo electrónico de Microsoft como Outlook.com o Hotmail
• Outlook para Mac 2011 y 2016; Outlook para Mac 16.80 no admite fuentes web

Gmail, incluida la app de Gmail en Android, por lo general no es compatible con las fuentes web. El webmail de Gmail para escritorio puede mostrar Roboto y Google Sans porque Gmail las incluye en sus propios estilos. Esto no significa que Gmail pueda cargar otras fuentes personalizadas desde el correo electrónico. Configura una fuente alternativa y prueba el correo electrónico en las apps de Gmail que usan los destinatarios.

Para ver detalles por aplicación y versión de correo electrónico, consulta Tabla de compatibilidad de fuentes web de Can I email.

Optimizar las fuentes en los correos electrónicos

La mejor manera de asegurarte de que tu correo electrónico se vea consistente en todos los dispositivos es usar una fuente segura para la web. Las fuentes predeterminadas de Klaviyo suelen ser seguras para la web. Encuentra las fuentes que ofrece Klaviyo en:

• Contenido > Medios y marca > Marca: selecciona Fuentes. Si en su lugar ves Estilo, selecciónalo para encontrar la sección Fuentes.
• El panel Editar estilos en el editor de plantillas de correo electrónico
• La barra de herramientas de formato de texto al editar texto en un bloque de texto, o los controles de fuente en otros bloques que contienen texto
• El panel Editar estilos en el editor de formularios de registro

Consejos para usar fuentes personalizadas

Si prefieres usar una fuente personalizada, usa los consejos a continuación para asegurarte de que tus correos electrónicos se vean bien diseñados en todos los dispositivos.

Usar fuentes alternativas

Selecciona una fuente de respaldo segura para la web que coincida lo más posible con la fuente personalizada. Puedes seleccionar una fuente de respaldo de las fuentes predeterminadas de Klaviyo al configurar la fuente personalizada.

Usa texto en las imágenes.

Aunque un correo electrónico solo con imágenes puede afectar la capacidad de entrega, puedes usar estratégicamente una combinación de texto dentro de las imágenes y texto en bloques de texto para crear un correo que se alinee con tu marca. Elige una fuente personalizada, alineada con la marca, para los encabezados y los llamados a la acción (CTA), y combínala con una fuente segura para la web para usarla en el cuerpo del texto. Mantén también la información esencial y el CTA principal en texto o en bloques de botón, para que los destinatarios puedan usarlos incluso si no se cargan las imágenes.

Usa imágenes que contengan tu fuente de marca para el texto seleccionado y asegúrate de agregar texto alternativo cuando agregues las imágenes a tu correo electrónico. Luego, aplica la fuente segura para web al resto del texto de tu correo electrónico. Esto te permite usar tu fuente de marca y mantener el resto del correo electrónico legible cuando las imágenes no se cargan.

Haz pruebas exhaustivas

Independientemente de los métodos que elijas, prueba tus correos electrónicos a fondo, especialmente cuando uses un diseño nuevo. Envíate el correo electrónico a varios dispositivos para asegurarte de que estás satisfecho con cómo se ve en cada uno. También puedes usar programas de prueba de correos electrónicos como Litmus o Email on Acid para hacer pruebas en una gama más amplia de dispositivos.

Recursos adicionales