Cómo añadir fuentes personalizadas a las plantillas de correo electrónico

Qué aprenderás

En este artículo, descubrirás cómo añadir nuevas fuentes al editor de plantillas de correo electrónico de Klaviyo para que tus correos electrónicos concuerden con el estilo de tu marca. También conocerás las ventajas y desventajas de utilizar fuentes personalizadas y sabrás cómo elegir una fuente compatible con la mayor variedad de bandejas de entrada. 

Podrás utilizar Google Fonts, Adobe Typekit o fuentes importadas (como las autoalojadas) en tus correos electrónicos. No obstante, deberás tener en cuenta que solo algunas bandejas de entrada de correo electrónico admiten fuentes personalizadas. De hecho, muchos clientes populares (como Gmail y Yahoo) no las admiten. 

Términos clave

• Fuente personalizada
  Cualquier fuente que no se proporcione de forma predeterminada en el editor de Klaviyo 
• Fuente web
  Una fuente personalizada que debe cargarse desde un origen externo 
• Fuente web segura
  Una fuente que se almacena localmente en la mayoría de los dispositivos y que, por lo tanto, no es necesario cargarla desde un origen externo para poder visualizarla 
• Fuente alternativa
  Una fuente web segura que se utiliza en las bandejas de entrada que no admiten las fuentes personalizadas

Compatibilidad y limitaciones de las fuentes personalizadas

Las fuentes personalizadas pueden ayudar a mantener la cohesión de tu contenido de marketing, ya que alinean tu contenido de correo electrónico con tu sitio de comercio electrónico. Sin embargo, es posible que las fuentes web (es decir, las fuentes que se cargan desde un origen externo en lugar de estar disponibles en el almacenamiento del dispositivo) no se muestren correctamente en todos los dispositivos o en todos los correos de clientes. Las fuentes predeterminadas de Klaviyo están preinstaladas en la gran mayoría de los ordenadores y dispositivos, por lo que podrás ofrecer una experiencia uniforme a todos los suscriptores. 

Estos son algunos clientes de correo que admiten fuentes web:

• Apple Mail
• iOS Mail (el navegador de correo electrónico predeterminado de iOS)
• Google Android (excepto Android 2.3, que no admite el método @import que utilizan las fuentes de Google y Adobe)
• Samsung Email (Android 8.0)
• Outlook para Mac

Fuentes personalizadas en Gmail y otras bandejas de entrada no compatibles

Es posible que los destinatarios que utilicen Gmail (u otras bandejas de entrada que no admitan fuentes personalizadas) vean tu fuente alternativa, que puedes configurar en tu plantilla de correo electrónico, en lugar de la fuente personalizada que hayas elegido. Para evitarlo, te recomendamos que selecciones una fuente web segura personalizada, que estará disponible en la mayoría de los dispositivos independientemente de la compatibilidad de estos con las fuentes web. 

Aquí encontrarás fuentes web seguras, junto con un desglose de la compatibilidad por dispositivo. 

Añade una nueva fuente personalizada en el editor de plantillas de correo electrónico 

Para añadir una fuente personalizada a una plantilla de correo electrónico, sigue estos pasos: 

1. Abre un bloque de texto en la plantilla o en la pestaña Estilos de la plantilla.
2. En el menú desplegable de fuentes, desplázate hasta el final de la lista de fuentes y haz clic en Añadir fuente.
3. En el cuadro de diálogo disponible, elige Fuente de Google, Fuente de Adobe o Importar  fuente, según el origen de la fuente.
4. Sigue las instrucciones de una de las secciones que se muestran a continuación en función de tu tipo de fuente: Google, Adobe o una fuente importada.

Una vez que hayas añadido una fuente a tus plantillas de correo electrónico, esta estará disponible para el resto de las plantillas, así como para tus formularios de registro.

Añade variantes adicionales a una fuente personalizada ya creada

Puedes editar, eliminar o actualizar las variantes seleccionadas de tus fuentes personalizadas siempre que quieras en Biblioteca de marca>Fuentes.

Actualiza una fuente existente

Para seleccionar más variantes de una fuente personalizada de Google o importada que ya hayas añadido, sigue estos pasos: 

1. En Klaviyo, dirígete a Contenido > Imágenes y marca.
2. Haz clic en Fuentes.
3. Busca la fuente que quieras editar en Tus fuentes. 
4. En la tarjeta de esa fuente, haz clic en los tres puntos de la esquina superior derecha.
5. Haz clic en Editar en el menú disponible. 
6. Haz clic en N.º de variantes de fuente seleccionadas para ampliar la lista de variantes de fuente. 
7. Selecciona las variantes adicionales que quieras añadir.
8. Haz clic en Actualizar fuente.

No puedes añadir variantes a una fuente de Adobe después de haberla subido, ya que las variantes están integradas en el enlace de Typekit.   

Si aparece el mensaje de error Ya existe una fuente con este nombre, sigue los pasos anteriores para editar la versión existente de la fuente en lugar de volver a añadirla. 

Elimina una fuente

1. En Klaviyo, dirígete a Contenido > Imágenes y marca.
2. Haz clic en Fuentes.
3. Busca la fuente que quieras editar en Tus fuentes. 
4. En la tarjeta de esa fuente, haz clic en los tres puntos de la esquina superior derecha.
5. Haz clic en Eliminar en el menú disponible. 

Cualquier mensaje de Klaviyo que esté usando la fuente personalizada pasará inmediatamente a usar la de reserva. Si vuelves a añadir la fuente, los correos en cuestión empezarán a usarla de nuevo. 

Añadir una fuente de Google

Para añadir una fuente de Google, sigue estos pasos:

1. Escribe el nombre de la fuente de Google que quieras usar.
2. Elige una fuente alternativa.
3. Haz clic en Añadir fuente. 

Añadir una fuente de Adobe

Las fuentes de Adobe solo están disponibles para los usuarios que tienen una suscripción activa a Adobe Fonts. Para añadir una fuente de Adobe, sigue estos pasos:

1. Haz clic en Fuente de Adobe.
2. Pega la dirección de CSS correspondiente. La dirección debe tener este formato: https://use.typekit.com/123ABC.
3. Elige una fuente alternativa.
4. Haz clic en Añadir fuente. 

Añadir una fuente importada

Las fuentes importadas, a veces denominadas «fuentes autoalojadas», solo se recomiendan para aquellos remitentes que puedan recurrir a un desarrollador. No puedes cargar directamente el archivo de fuentes en Klaviyo. Si no tienes acceso a un equipo de desarrolladores, te recomendamos que busques una fuente de Google o de Adobe que sea similar a la fuente que quieras usar. 

Para usar una fuente importada, sigue estos pasos:

1. Aloja la fuente en tus servidores o en un servicio de alojamiento de fuentes. Debes habilitar el uso compartido de recursos entre orígenes (CORS, por sus siglas en inglés); para ello, configura el encabezado Access-Control-Allow-Origin como «*», de modo que las bandejas de entrada de los destinatarios puedan acceder a la fuente. Más información sobre CORS
2. Una vez que hayas alojado correctamente la fuente, haz clic en Importar fuente en la ventana modal Añadir fuente y pega el URL donde esté alojada en el campo Dirección de origen.
3. Indica el nombre, el grosor y el estilo de la fuente en los campos correspondientes.
4. Elige una fuente alternativa.
5. Haz clic en Añadir fuente. 

Información sobre las fuentes alternativas

Con todos los tipos de fuentes personalizadas, tendrás que seleccionar una fuente alternativa. Esta fuente se mostrará para aquellos destinatarios que utilicen clientes de correo que no admitan tu fuente personalizada. Elige una fuente en la lista de opciones disponibles que tenga un estilo similar al de tu fuente personalizada. 

Por ejemplo, si utilizas Poppins (una fuente de Google) como fuente personalizada y Arial como fuente alternativa, los destinatarios de tu correo electrónico verán lo siguiente: 

• Los destinatarios que abran tu correo electrónico en un navegador compatible con fuentes web (por ejemplo, Apple Mail o iOS Mail) verán la fuente Poppins. 
• Los destinatarios que abran tu correo electrónico en un navegador que no admita fuentes web (por ejemplo, Gmail) verán la fuente Arial.

Aplica una fuente personalizada

Una vez que hayas configurado una fuente personalizada, podrás aplicarla a cualquier texto de tu plantilla, incluidos los siguientes elementos: 

• Estilos de tu plantilla principal 
• Estilos de cualquier bloque 
• Fragmentos de texto específicos de un bloque de texto 
• Bloques de botones, bloques de productos y cualquier otro tipo de bloque que contenga texto 

Para aplicar una fuente personalizada a un bloque de texto, sigue estos pasos:

1. Selecciona el bloque de texto que contenga el texto al que quieras aplicar la fuente.
2. Resalta el texto concreto al que quieras aplicar la fuente.
3. Selecciona la fuente personalizada en el menú desplegable. 

Para todos los demás tipos de bloque, o para los estilos de bloque y plantilla, selecciona la fuente en el menú desplegable correspondiente.

En los bloques de tablas y bloques divididos, la fuente personalizada aparece en el área de diseño (por ejemplo, en la vista previa de edición), pero no en el panel de la izquierda. El panel lateral izquierdo muestra tu fuente alternativa en lugar de la fuente personalizada. 

Obtén una vista previa de tus fuentes personalizadas 

Cuando tu plantilla esté lista, envíate un correo electrónico de vista previa al hacer clic en Previsualizar y probar > Enviar prueba. Intenta abrir el mensaje en varios dispositivos para comprobar cómo lo verán los distintos destinatarios. También puedes utilizar una herramienta como Email on Acid para obtener una vista previa en una mayor variedad de dispositivos. 

Recursos adicionales

• Guía sobre el editor de plantillas de correo electrónico
• Información sobre las fuentes en correos electrónicos