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

Objetivos del artículo

Aprende 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. En este artículo, también conocerás las ventajas y desventajas de utilizar fuentes personalizadas, y 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, mientras que muchos clientes populares (como Gmail y Yahoo) no las admiten. 

Términos clave

• Fuente personalizada
  Cualquier fuente que no esté incluida por defecto en el editor de Klaviyo 
• Fuente web
  Fuente personalizada que debe cargarse desde una fuente externa 
• 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 ecommerce. 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 electrónicos de clientes. Las fuentes por defecto 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 electrónico que admiten fuentes web:

• Apple Mail
• iOS Mail (el navegador de correo electrónico por defecto en iOS)
• Google Android (excepto Android 2.3, que no admite el método @import que utilizan las fuentes de Google y Adobe)
• Samsung Mail (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. 

Encuentra fuentes web seguras aquí, junto con un desglose de la compatibilidad por dispositivo. 

Añadir 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: 

1. Abre un bloque de texto en la plantilla o en la pestaña Estilos de la plantilla.
2. En el menú desplegable de la fuente, haz clic en Añadir fuente en la parte inferior del menú.
3. En el modal que aparece, elige Fuente de Google, Fuente de Adobe, o Importar fuente, dependiendo del origen de tu fuente.
4. Sigue las instrucciones en las secciones siguientes para tu tipo de fuente(Google, Adobe o Fuentes importadas).

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

Añadir variantes adicionales a una fuente personalizada existente

Puedes editar, eliminar o actualizar las variantes seleccionadas de tus fuentes personalizadas en Imágenes y marca > Fuentes.

Actualizar 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. Ve a Contenido > Imágenes y marca en Klaviyo.
2. Haz clic en Fuentes.
3. Busca la fuente que quieres 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ú que aparece. 
6. Haz clic en N.º de variantes de fuente seleccionadas para ampliar la lista de variantes de fuente. 
7. Selecciona cualquier variante adicional 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. 

Eliminar una fuente

1. Ve a Contenido > Imágenes y marca en Klaviyo.
2. Haz clic en Fuentes.
3. Busca la fuente que quieres 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ú que aparece. 

Cualquier mensaje de Klaviyo que esté usando la fuente personalizada pasará inmediatamente a usar la alternativa. Si vuelves a añadir la fuente, los correos electrónicos comenzarán a utilizarla de nuevo. 

Añadir una fuente de Google

Para añadir una fuente de Google:

1. Escribe el nombre de la fuente de Google que quieres 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 tengan una suscripción con actividad a Adobe Fonts. Para añadir una fuente de Adobe:

1. Haz clic en Fuente de Adobe.
2. Pega tu dirección de CSS. 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 utilizar una fuente importada:

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). 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. Obtén más información sobre CORS.
2. Una vez que hayas alojado correctamente la fuente, haz clic en Importar fuente en el modal Añadir fuente y pega la URL del alojamiento 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. 

Acerca de 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 desde 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 desde un navegador que no admita fuentes web (por ejemplo, Gmail) verán la fuente Arial.

Aplicar 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. 

Previsualizar 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 del editor de plantillas de correo electrónico
• Fuentes en correos electrónicos