Qué aprenderás
En este artículo, descubrirás cómo añadir nuevas fuentes al editor de plantillas de email de Klaviyo para que tus emails 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 emails. No obstante, deberás tener en cuenta que solo algunas bandejas de entrada de email admiten fuentes personalizadas. De hecho, muchos clientes populares (como Gmail y Yahoo) no las admiten.
En este artículo, te explicaremos cómo usar fuentes personalizadas en tus plantillas de correo electrónico, no en tus formularios de registro. Para obtener información sobre cómo añadir fuentes personalizadas a tus formularios de registro, consulta nuestro artículo sobre fuentes personalizadas en formularios de registro.
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 email 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 email 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 email, 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 asistencia por dispositivo.
Añade una nueva fuente personalizada en el editor de plantillas de email
Para añadir una fuente personalizada a una plantilla de email, sigue estos pasos:
- Abre un bloque de texto en la plantilla o en la pestaña Estilos de la plantilla.
- Dentro del menú desplegable de fuentes, haz clic en Añadir fuente, que está en la parte inferior.
- En el cuadro de diálogo disponible, elige Fuente de Google, Fuente de Adobe o Importar fuente, según el origen de la fuente.
- Sigue las instrucciones de una de las secciones que se muestran a continuación en función del tipo de fuente: Google, Adobe o fuente importada.
Una vez que hayas añadido una fuente a tus plantillas de email, 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 Imágenes y 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:
- En Klaviyo, dirígete a Contenido > Imágenes y marca.
- Haz clic en Fuentes.
- Busca la fuente que quieras editar en Tus fuentes.
- En la tarjeta de esa fuente, haz clic en los tres puntos de la esquina superior derecha.
- Haz clic en Editar en el menú disponible.
- Haz clic en N.º de variantes de fuente seleccionadas para ampliar la lista de variantes de fuente.
- Selecciona las variantes adicionales que quieras añadir.
- 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
- En Klaviyo, dirígete a Contenido > Imágenes y marca.
- Haz clic en Fuentes.
- Busca la fuente que quieras editar en Tus fuentes.
- En la tarjeta de esa fuente, haz clic en los tres puntos de la esquina superior derecha.
- 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:
- Escribe el nombre de la fuente de Google que quieras usar.
- Elige una fuente alternativa.
- 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:
- Haz clic en Fuente de Adobe.
- Pega la dirección de CSS correspondiente. La dirección debe tener este formato: https://use.typekit.com/123ABC.
- Elige una fuente alternativa.
- 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:
- 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
- Una vez que hayas alojado correctamente la fuente, haz clic en Importar fuente en el cuadro de diálogo Añadir fuente y pega la URL del alojamiento en el campo Dirección de la fuente.
- Indica el nombre, el grosor y el estilo de la fuente en los campos correspondientes.
- Elige una fuente alternativa.
- 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 email verán lo siguiente:
- Los destinatarios que abran tu email en un navegador compatible con fuentes web (por ejemplo, Apple Mail o iOS Mail) verán la fuente Poppins.
- Los destinatarios que abran tu email 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:
- Selecciona el bloque de texto que contenga el texto al que quieras aplicar la fuente.
- Resalta el texto concreto al que quieras aplicar la fuente.
- 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
Una vez que la plantilla esté lista, envíate un email de vista previa al hacer clic en Previsualizar y probar > Enviar prueba. Intenta abrir el mensaje en varios dispositivos para ver cómo se verá a los diferentes destinatarios. También puedes usar una herramienta como Email on Acid para obtener una vista previa en una mayor variedad de dispositivos.