Cómo utilizar fuentes personalizadas en formularios de registro
Qué aprenderás
Descubre cómo diseñar tus formularios de registro con fuentes personalizadas para que tus clientes disfruten de una identidad de marca sólida y coherente con el resto de tu sitio.
Crear un formulario de registro con un diseño atractivo es fundamental para que la gente complete el objetivo de tu formulario. Si tu marca utiliza fuentes que no están disponibles de forma nativa en el editor de formularios de registro, añadir estas fuentes personalizadas es una forma sencilla de conseguir que tus formularios se vean coherentes con el resto de tu sitio. Después de añadir tus fuentes, puedes usar tu fuente para personalizar tus formularios de registro como consideres.
Términos clave
- Fuente personalizada
Cualquier fuente que no se proporcione de forma predeterminada en el editor de Klaviyo. Esto incluye:- Fuentes de Google
- Fuentes de Adobe
- Fuentes importadas
- 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 de reserva
Una fuente segura para la web que se usa si una página no puede cargar la fuente principal.
Añadir fuentes personalizadas a tu cuenta
En el menú principal de la izquierda, ve a Contenido > Imágenes y marca. Desde ahí, haz clic en la pestaña Fuentes. Puedes añadir una fuente de Google, una fuente de Adobe o una fuente importada.
Si añades a Klaviyo una fuente personalizada que ya se utiliza en tu sitio, sube el estilo exacto de fuente (por ejemplo, light, bold o italic) y el grosor (por ejemplo, 400) que tu sitio utiliza actualmente. Si subes una fuente y seleccionas un estilo o grosor que difiere ligeramente, los estilos seleccionados en Klaviyo pueden anular algunos de los estilos de fuente existentes de tu sitio.
Añadir una fuente de Google
Para añadir una fuente de Google, sigue estos pasos:
- Selecciona el menú desplegable Nombre de la fuente para ver una lista de todas las fuentes de Google disponibles, excepto las fuentes que ya hayas cargado en tu cuenta.
- Elige la fuente que quieras. Al seleccionar una, verás una vista previa de la fuente debajo del menú desplegable, así como el número de posibles variantes (p. ej., negrita, cursiva, etc.).
- Si quieres añadir más de 1 variante, haz clic en la flecha situada junto al número de variantes posibles y elige las fuentes que quieras añadir.
- Selecciona una Fuente alternativa.
- Haz clic en Añadir fuente. La fuente que has añadido ahora se mostrará en la sección Tus fuentes en la parte inferior de la página.
Desde la sección Tus fuentes , podrás ver las fuentes que has añadido a tu cuenta. Para editar o eliminar cualquiera de tus fuentes en esta sección, selecciona los tres puntos en la fuente.
Si decides usar fuentes de Google, a efectos del RGPD, ten en cuenta que las fuentes de Google se alojan en Google. Al incluir una fuente de Google en el repositorio de fuentes, estarás usando la fuente de Google. Klaviyo ofrece una selección de fuentes personalizadas que usamos en nuestras plantillas de formulario de registro, disponibles para que puedas importar y usar fácilmente. Ver la lista de fuentes alojadas en Klaviyo.
Añadir una fuente de Adobe
Debes tener una cuenta de Adobe para usar fuentes de Adobe.
Para añadir una fuente de Adobe, sigue estos pasos:
- Ve a Adobe Fonts.
- Busca el enlace de tu fuente de Adobe y, luego, selecciona tu fuente.
- Junto al nombre de tu fuente, haz clic en el icono de código.
- Si es necesario, introduce un nuevo nombre de proyecto y, a continuación, haz clic en Guardar.
- En la siguiente ventana modal, copia la URL https://use.typekit.net de la fuente que quieras añadir. No incluyas el .css como parte de la URL cuando la copies.
- Vuelve a Klaviyo y pega la URL en el campo Dirección CSS.
- Selecciona Continuar y, a continuación, elige una fuente de reserva para la fuente que quieres subir. Ten en cuenta que, si una fuente ya está disponible en tu cuenta, se muestra una marca de verificación verde junto a la fuente y aparece su fuente de reserva existente.
- Selecciona Añadir fuente.
Una vez que hayas añadido tu fuente, aparecerá en la sección Tus fuentes en la parte inferior de la página. Para editar cualquiera de tus fuentes en esta sección, selecciona los tres puntos de la fuente.
Añadir una fuente importada
Si has comprado o descargado una fuente personalizada que no está alojada en una fuente de terceros, aun así puedes usarla en un formulario de Klaviyo. Primero, aloja los archivos de fuente en una ubicación a la que Klaviyo pueda acceder (por ejemplo, en los recursos de tu sitio o en una plataforma de alojamiento de fuentes). Asegúrate de habilitar el uso compartido de recursos entre orígenes (CORS) configurando Access-Control-Allow-Origin header como *, para que los dispositivos de tus destinatarios puedan acceder a la fuente.
Para añadir una fuente importada:
- Ponle un nombre a la fuente.
- Especifica un grosor, un estilo y un URL de origen. El URL de origen debe ser un URL válido que termine en WOFF, WOFF2, TTF, EOT o SVG.
- Opcional: Para añadir variantes adicionales, selecciona Añadir variante de fuente y, a continuación, repite el paso 2 para esta variante.
- Selecciona Añadir fuente para añadir esta fuente a la sección Tus fuentes .
En Tus fuentes, podrás ver las fuentes que has importado a tu cuenta. También puedes eliminar o editar tus fuentes seleccionando los 3 puntos en la fuente.
Editar una fuente
Para editar una fuente personalizada existente:
- Ve a Contenido > Imágenes y marca > Fuentes.
- Busca la fuente que te gustaría editar en la sección Tus fuentes en la parte inferior de la página.
- En la tarjeta de esa fuente, haz clic en los 3 puntos de la esquina superior.
- Elige Editar. A partir de aquí, podrás:
- Edita la fuente de reserva para cualquier fuente personalizada.
- Solo para las fuentes alojadas por Google y Klaviyo, edita o añade variantes a las variantes seleccionadas seleccionando N.º de variantes de fuente para ampliar la lista y, después, seleccionando las fuentes que quieras añadir.
No puedes añadir variantes a las fuentes de Adobe después de haberlas subido, ya que las variantes están integradas en tu enlace de Typekit. Para añadir variantes a una fuente de Adobe, debes eliminar la fuente existente y volver a añadirla usando un enlace de Typekit diferente que tenga todas las variantes que quieras incluir.
- Cuando termines de editar la fuente, selecciona Actualizar fuente.
Elimina una fuente
Para eliminar una fuente:
- Ve a la sección Tus fuentes .
- En la fuente que quieras eliminar, haz clic en los 3 puntos y selecciona Eliminar. Si eliges eliminar la fuente, aparecerá un modal que te avisará de que, si tu fuente se usa en algún formulario, se mostrará la fuente de reserva después de eliminar la fuente añadida.
- Selecciona Eliminar.
Una vez que se elimina una fuente personalizada, cualquier formulario de Klaviyo que esté usando actualmente la fuente personalizada pasará inmediatamente a usar la fuente de reserva. Si vuelves a añadir la fuente, esos formularios empezarán a usarla de nuevo.
Usar fuentes personalizadas en el editor de formularios de registro
Para usar tu fuente personalizada en un formulario de registro, solo tienes que editar el texto en la vista previa del formulario:
- Ve a la pestaña formularios de registro.
- Busca el formulario que quieras editar y haz clic en los 3 puntos que hay junto a él; luego, selecciona Editar formulario.
- En la vista previa del formulario, selecciona el texto que quieras editar.
- En el menú Texto de la derecha, resalta el texto.
- Usa el menú desplegable de fuentes de la parte superior para seleccionar tu fuente personalizada. Ten en cuenta que las fuentes de la sección Tus fuentes de tu cuenta aparecerán en la parte superior de la lista.
Al editar, la fuente personalizada aparecerá en el área de diseño (por ejemplo, en la vista previa de edición), pero no en el panel del lado izquierdo. El panel lateral izquierdo muestra tu fuente alternativa en lugar de la fuente personalizada.
- Cuando estés satisfecho con los cambios, haz clic en Publicar para aplicarlos.
Fuente del sitio afectada por Klaviyo.js
Klaviyo seguimiento de actividad en el sitio activo (Klaviyo.js), debe instalarse manualmente o a través de tus integraciones de comercio electrónico para poder publicar el formulario de registro de Klaviyo en tu sitio web. Si solo has cargado algunas variantes de fuentes, Klaviyo.js carga las variantes restantes en tu biblioteca cuando se inyecta en tu sitio. 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:
- Elimina las fuentes relevantes de tu repositorio de fuentes de Klaviyo.
- Modificar el CSS del encabezado de tu sitio web de forma que no se sobrescriba cuando Klaviyo.js cargue las variantes 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 alojar una fuente personalizada en tu sitio web
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:
- Creación de una estrategia de captación eficaz mediante formularios de registro