Cómo alojar una fuente personalizada en tu sitio
Objetivos del artículo
Aprende cómo subir una fuente que no esté alojada en Google o Adobe a tu sitio de ecommerce, para importarla a tu formulario de registro de Klaviyo. Hay 2 opciones si deseas usar una fuente importada en tu formulario de registro:
- Usar la fuente pública alojada en tu sitio web.
- Alojar públicamente tu propia fuente y usar su URL para importarla a tu formulario de registro.
En este artículo, te mostraremos cómo subir una fuente personalizada a tu sitio de ecommerce para usarla en tus formularios, no en tus plantillas de correo electrónico. Si deseas obtener información sobre cómo añadir fuentes personalizadas a tus plantillas de correo electrónico, visita nuestro artículo sobre fuentes personalizadas en plantillas de correo electrónico.
Cómo usar la fuente de tu sitio web
Para comenzar, puedes usar el URL público de tu sitio para subir la fuente a Klaviyo.
Ten en cuenta que este método para alojar una fuente personalizada no es compatible con las tiendas de Shopify.
- Dirígete a tu sitio.
- Haz clic con el botón derecho del mouse para seleccionar Inspeccionar o Inspeccionar elemento, según tu navegador de Internet.
- Desde ahí, ve a Red > Fuentes.
- Actualiza la página.
Verás todas tus fuentes en forma de lista. Si no aparece el nombre de la fuente y en su lugar ves una cadena de números y letras, selecciona la pestaña de vista previa para decidir qué fuente deseas usar en tu formulario de registro. - En Nombre, haz clic en la fuente que deseas importar.
- Selecciona la pestaña Encabezados.
- Copia el URL de la fuente que deseas usar.
- En Klaviyo, navega a Contenido > Imágenes y marca > Fuentes.
- Selecciona Importar fuente.
- Sube tu fuente personalizada pegando el URL en la Dirección de origen.
Cómo subir una fuente autoalojada
Empieza por descargar la fuente a tu computadora si todavía no está alojada públicamente en Internet. Ten en cuenta de que el archivo debe estar en los formatos WOFF, WOFF2, TTF, EOT o SVG para que puedas usarlo en Klaviyo. Además, ten cuidado al descargar archivos de fuentes de Internet, ya que pueden contener malware. Después:
- Sube la fuente a los recursos de tu sitio de ecommerce. Tendrás que hacerlo dentro del código de tu sitio.
- Guárdala.
Para obtener más información acerca de cómo añadir un recurso a tu sitio, visita el centro de ayuda de la plataforma de ecommerce correspondiente.
Una vez obtenido el 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.
Impacto de Klaviyo.js sobre la fuente de tu sitio
El seguimiento con actividad en el sitio de Klaviyo (Klaviyo.js), se debe instalar manualmente o mediante las integraciones de ecommerce para publicar formularios de registro de Klaviyo en el sitio web. Si solo cargaste algunas variantes de fuentes, Klaviyo.js carga las demás variantes en la biblioteca cuando se inyecta en el sitio. Debido a esto, es posible que en este proceso se editen ligeramente las fuentes del sitio, como un cambio en el grosor del encabezado del sitio.
Tienes 2 opciones para resolver cualquier cambio que Klaviyo.js haga en tus fuentes:
- Elimina las fuentes relevantes de tu biblioteca de fuentes de Klaviyo.
- Actualiza el CSS del encabezado de tu sitio para que no se sobrescriba cuando Klaviyo.js cargue las variantes adicionales.
Esta opción requeriría un conocimiento exhaustivo del lenguaje CSS, de modo que posiblemente necesites la ayuda de un desarrollador. Aunque Klaviyo no puede ayudarte a ajustar la CSS de tu sitio, contamos con una amplia red de socios.