Cómo alojar una fuente personalizada en tu sitio web

Qué aprenderás

Aprende a cargar una fuente, es decir, una que no esté alojada en Google o Adobe, en tu plataforma de comercio electrónico para importarla en tu formulario de registro de Klaviyo. Si quieres utilizar una fuente importada en tu formulario de registro, existen 2 opciones:

1. Utiliza la fuente pública alojada en tu sitio web.
2. Alojar tu propia fuente públicamente y usar la URL para importarla en tus formularios de registro

Utilizar la fuente de tu sitio web

Para empezar, puedes usar la URL pública de tu sitio para subir la fuente a Klaviyo.

1. Ve a tu sitio web.
2. Haz clic con el botón derecho del ratón para seleccionar Inspeccionar o Inspeccionar elemento (según el navegador que utilices).
3. Desde ahí, ve a Red > Fuentes.
4. Actualiza la página.
   Se mostrará una lista con todas tus fuentes. Si no aparece el nombre de la fuente que quieras utilizar y, en su lugar, se muestra una serie de números y letras, selecciona la pestaña de vista previa para decidir qué fuente prefieres usar en tu formulario de registro.
5. En Nombre, haz clic en la fuente que quieras importar.
6. Selecciona la pestaña Encabezados.
7. Copia la URL de la fuente que quieras utilizar.
8. En Klaviyo, navega hasta Contenido > Imágenes y marca > Fuentes.
9. Selecciona Importar fuente.
10. Carga tu fuente personalizada pegando la URL en la Dirección de origen.

Subir una fuente autoalojada

Para empezar, si la fuente que quieres usar no está alojada públicamente en Internet, descárgala en tu ordenador. Recuerda que el archivo debe tener el formato WOFF, WOFF2, TTF, EOT o SVG para poder utilizarlo en Klaviyo. Además, ten cuidado al descargar archivos de fuentes de Internet, ya que pueden contener malware. A continuación, sigue estos pasos:

1. Sube la fuente a los recursos de tu sitio de comercio electrónico. Tendrás que hacerlo dentro del código de tu sitio.
2. Guárdala.

Para consultar más información sobre cómo añadir un recurso a tu sitio web, visita los centros de ayuda de las plataformas de comercio electrónico correspondientes:

• Shopify
• BigCommerce

Una vez obtengas la URL, navega de nuevo a Klaviyo y selecciona Contenido > Imágenes y marca > Fuentes. Desde aquí, haz clic en la pestaña Importar fuente e importa tu fuente.

Fuente del sitio afectada por Klaviyo.js

Debes instalar el seguimiento de Actividad en el sitio (Klaviyo.js) manualmente o a través de tu integración de plataforma de comercio electrónico para poder publicar formularios de registro de Klaviyo en tu sitio web. Si solo has cargado variaciones de algunas fuentes, Klaviyo.js cargará las variaciones restantes en tu biblioteca cuando se inyecte en tu sitio web. Debido a esto, las fuentes de tu sitio web podrían sufrir pequeñas modificaciones durante el proceso (por ejemplo, podría cambiar el grosor del encabezado del sitio). 

Hay dos opciones para evitar que Klaviyo.js realice cambios en tus fuentes (elige una):

• Eliminar esas fuentes de tu biblioteca de fuentes de Klaviyo 
• Modificar el CSS del encabezado de tu sitio web de forma que no se sobrescriba cuando Klaviyo.js cargue las variaciones adicionales 
  

  Dado que la segunda opción requiere conocimientos avanzados de CSS, es posible que tengas que pedir ayuda a algún desarrollador. Klaviyo no puede ofrecerte asistencia para modificar el CSS de tu sitio web, pero contamos con una amplia red de socios.

Recursos adicionales

• Cómo utilizar fuentes personalizadas en formularios de registro
• Curso: Creación de una estrategia de captación eficaz mediante formularios de registro
• Cómo añadir fuentes personalizadas a plantillas de correo electrónico