Cómo alojar una fuente personalizada en tu sitio
Objetivos del artículo
Aprende cómo alojar una fuente personalizada (es decir, una fuente que no esté alojada en Google o Adobe) en tu sitio de ecommerce e importarla para usarla en 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.
Antes de importar una fuente, asegúrate de que el archivo WOFF, WOFF2, TTF o EOT tenga una URL HTTPS de acceso público. El host de fuentes debe permitir el uso compartido de recursos entre orígenes (CORS) para que Klaviyo y los navegadores de los visitantes puedan cargar el archivo. Si Klaviyo informa que no se pudo acceder a un archivo de fuente, revisa la URL y la configuración de CORS del host.
Cómo usar la fuente de tu sitio web
Usa la URL pública de un archivo de fuente en tu sitio para importarla en Klaviyo. Los pasos a continuación usan DevTools de Chrome para encontrar la URL.
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 en la página y selecciona Inspeccionar.
- Abre Red y selecciona el filtro Fuente.
- Actualiza la página para enumerar los archivos de fuente que cargó esa página.
- En Nombre, selecciona el archivo de fuente que quieres importar. Si el nombre del archivo es una cadena de números y letras, selecciona Vista previa para ayudar a identificar la fuente.
- Haz clic derecho en la solicitud de fuente y selecciona Copiar > Copiar URL. Usa esta URL en la sección Importa tu fuente en Klaviyo que aparece abajo.
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 que el archivo debe estar en formato WOFF, WOFF2, TTF o EOT para poder usarlo en Klaviyo. Además, ten cuidado al descargar archivos de fuentes de Internet, ya que pueden contener malware. Después:
- Sube el archivo de fuente a una ubicación pública en tu sitio de ecommerce y sigue las instrucciones de tu plataforma a continuación.
- Guarda la carga y copia la URL pública HTTPS del archivo.
Para obtener más información sobre cómo agregar un archivo a tu sitio, consulta el centro de ayuda de tu plataforma de ecommerce:
Importa la fuente a Klaviyo
Una vez que tengas la URL del archivo de la fuente, sigue estos pasos para agregarla a tu biblioteca de fuentes de Klaviyo.
- En Klaviyo, ve a Contenido > Medios y marca > Marca. Abre Fuentes o, si tu página tiene una pestaña Estilo, ábrela para encontrar la sección Fuentes.
- Selecciona Agregar fuente y elige Fuente personalizada.
- Ingresa un Nombre de fuente personalizada. En URL de origen, pega la URL del archivo de fuente.
- Selecciona el grosor de la fuente y el estilo de fuente que coincidan con el archivo. Por ejemplo, usa Normal 400 y Normal para un archivo de fuente regular, sin cursiva. Si la fuente ya se usa en el sitio, haz que el grosor y el estilo coincidan con los existentes para evitar cambiar cómo se muestra.
- Opcional: Selecciona Agregar variante de fuente para cada grosor o estilo adicional. Ingresa una URL independiente y el peso y estilo correspondientes para cada variante.
- Revisa la fuente de respaldo y elige la fuente de respaldo que se usará si tu fuente personalizada no se puede cargar. Selecciona Guardar.
Después de guardar, la fuente estará disponible en la sección Fuentes. Sigue los pasos para usar una fuente personalizada en un formulario de registro, aplicarla al formulario y publicar los cambios.
Impacto de Klaviyo.js sobre la fuente de tu sitio
El JavaScript onsite de Klaviyo (Klaviyo.js) debe instalarse manualmente o a través de tus integraciones de ecommerce para que el formulario de registro de Klaviyo se muestre en tu sitio web. Cuando se cargan los formularios, Klaviyo.js agrega a tu sitio las definiciones de fuentes guardadas en la biblioteca de fuentes de Klaviyo. Si estas usan la misma familia tipográfica que tu sitio, pero con diferentes grosores o estilos, pueden cambiar cómo se ve el texto del sitio, por ejemplo, el grosor de un encabezado.
Tienes 2 opciones para resolver cualquier cambio que Klaviyo.js haga en tus fuentes:
- Elimina las fuentes relevantes de la biblioteca de fuentes de Klaviyo. Antes de eliminar, revisa los formularios que usen la fuente: si la fuente ya no está disponible, mostrarán su fuente de respaldo.
- Actualiza el CSS del sitio para usar la familia tipográfica, el grosor y el estilo previstos cuando Klaviyo.js cargue las variantes de fuente guardadas.
Esta opción requeriría un conocimiento exhaustivo del lenguaje CSS, de modo que posiblemente necesites la ayuda de un desarrollador. Klaviyo no puede ofrecer asistencia para ajustar la CSS de tu sitio. Sin embargo, contamos con una amplia red de socios.