Cómo usar fuentes personalizadas en los formularios de registro

Objetivos del artículo

Aprende a diseñar los formularios de registro con fuentes personalizadas para que tus clientes experimenten una identidad de marca sólida y consistencia con el resto del sitio.

Crear un formulario de registro con un diseño atractivo es fundamental para motivar a las personas a completar el objetivo del formulario. Si tu marca usa tipografías que no están disponibles de forma nativa en el editor de formularios de registro, agregar estas tipografías personalizadas es una forma sencilla de hacer que los formularios se vean coherentes con el resto del sitio. Después de agregar las tipografías, puedes usar la tipografía para personalizar los formularios de registro como prefieras.

Términos clave

• Fuente personalizada
  Cualquier fuente que no esté incluida por defecto en el editor de Klaviyo. Esto incluye:
  • Google Fonts
  • Adobe Fonts
  • Fuentes importadas
• Fuente segura para la web
  Una fuente que se almacena localmente en la mayoría de los dispositivos y, por lo tanto, no es necesario cargarla desde un origen externo para que se muestre.
• Fuente de respaldo
  Una fuente web segura que se usa si una página no puede cargar la fuente principal.

Agregar fuentes personalizadas a la cuenta

En el menú principal del lado izquierdo, ve a Contenido > Imágenes y marca. Desde ahí, haz clic en la pestaña Fuentes. Puedes agregar una fuente de Google, una fuente de Adobe o una fuente importada.

Agregar una fuente de Google

Para añadir una fuente de Google:

1. Selecciona la lista desplegable Nombre de fuente para ver una lista de todas las fuentes de Google disponibles, excepto las fuentes que ya cargaste en tu cuenta.
2. Elige la fuente deseada. Al seleccionarla, verás una vista previa de la fuente debajo del menú desplegable, así como la cantidad de variantes posibles (p. ej., negrita, cursiva, etc.).
   • Si quieres agregar más de 1 variante, haz clic en la flecha junto al número de variantes posibles y elige las fuentes que quieres agregar.
3. Selecciona una Fuente alternativa.
4. Haz clic en Añadir fuente. La fuente que agregaste ahora se mostrará en la sección Tus fuentes, en la parte inferior de la página.

This content requires Functional cookies to be enabled.

Update Cookie Settings

En la sección Tus fuentes , podrás ver las fuentes que agregaste a la cuenta. Para editar o eliminar cualquiera de tus fuentes en esta sección, selecciona los tres puntos en la fuente.

Agregar una fuente de Adobe

Para añadir una fuente de Adobe:

1. Ve a Adobe Fonts.
2. Busca el enlace de tu fuente de Adobe y, luego, selecciona la fuente.
3. Junto al nombre de la fuente, haz clic en el ícono de código.
4. Si es necesario, ingresa un nuevo nombre de proyecto y luego haz clic en Guardar.
5. En la siguiente ventana modal, copia la URL https://use.typekit.net de la fuente que quieres agregar. No incluyas el .css como parte de la URL cuando la copies.

This content requires Functional cookies to be enabled.

Update Cookie Settings

6. Vuelve a Klaviyo y pega la URL en el campo Dirección de CSS.
7. Selecciona Continuar y, luego, elige una Fuente de reserva para la fuente que quieres cargar. Ten en cuenta que, si una fuente ya está disponible en la cuenta, aparecerá una marca de verificación verde junto a la fuente y se mostrará su fuente de reserva existente.

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. Selecciona Agregar fuente.

Una vez que hayas agregado la fuente, aparecerá en la sección Tus fuentes en la parte inferior de la página. Para editar cualquiera de las fuentes de esta sección, selecciona los tres puntos en la fuente.

Agregar una fuente importada

Si has comprado o descargado una fuente personalizada que no está alojada por una fuente de terceros, aun así puedes usarla en un formulario de Klaviyo. Primero, aloja los archivos de la fuente en una ubicación a la que Klaviyo pueda acceder (por ejemplo, en los activos de tu sitio o en una plataforma de alojamiento de fuentes). Asegúrate de habilitar el uso compartido de recursos entre orígenes (CORS) al configurar Access-Control-Allow-Origin header como *, para que los dispositivos de los destinatarios puedan acceder a la fuente.

Para añadir una fuente importada:

1. Nombra la fuente.
2. Especifica un grosor de fuente, estilo y una URL de origen. La URL de origen debe ser una URL válida que termine en WOFF, WOFF2, TTF, EOT o SVG.
3. Opcional: Para agregar variantes adicionales, selecciona Agregar variante de fuente y luego repite el paso 2 para esta variante.
4. Selecciona Agregar fuente para agregar esta fuente a la sección Tus fuentes .

This content requires Functional cookies to be enabled.

Update Cookie Settings

En Tus fuentes, podrás ver las fuentes que has importado a tu cuenta. También puedes eliminar o editar las fuentes seleccionando los 3 puntos en la fuente.

Editar una fuente

Para editar una fuente personalizada existente:

1. Navega a Contenido > Imágenes y marca > Fuentes.
2. Busca la fuente que deseas editar en la sección Tus fuentes en la parte inferior de la página.
3. En la tarjeta de esa fuente, haz clic en los 3 puntos de la esquina superior.
4. Selecciona Editar. Desde aquí, podrás:
   • Edita la fuente alternativa para cualquier fuente personalizada.
   • Solo para fuentes de Google y alojadas en Klaviyo, edita o agrega a las variantes seleccionadas seleccionando # de variantes de fuente para expandir la lista y, luego, seleccionando las fuentes que quieras agregar.
     
     

1. Cuando termines de editar la fuente, selecciona Actualizar fuente.

Eliminar una fuente

Para eliminar una fuente:

1. Ve a la sección Tus fuentes .
2. En la fuente que quieres eliminar, haz clic en los 3 puntos y luego selecciona Eliminar. Si eliges eliminar tu fuente, aparecerá una ventana modal que te notificará que, si la fuente se usa en algún formulario, se mostrará la fuente de respaldo después de eliminar la fuente agregada.
   

3. Selecciona Eliminar.

Una vez que se elimina una fuente personalizada, los formularios en Klaviyo que actualmente usan la fuente personalizada volverán de inmediato a la fuente de reserva. Si vuelves a añadir la fuente, esos formularios comenzarán a usarla de nuevo.

Uso de fuentes personalizadas en el creador de formularios de registro

Para usar tu fuente personalizada en un formulario de registro, solo edita el texto en la vista previa del formulario:

1. Ve a la pestaña Formulario de registro.
2. Busca el formulario que quieres editar y haz clic en los 3 puntos junto a él; luego, selecciona Editar formulario.
3. En la vista previa del formulario, selecciona el texto que quieras editar.
4. En el menú Texto de la derecha, resalta el texto.
5. Usa el menú desplegable de fuentes en la parte superior para seleccionar tu fuente personalizada. Ten en cuenta que las fuentes de la sección Tus fuentes de la cuenta aparecerán en la parte superior de la lista.
   

1. Cuando estés satisfecho con los cambios, haz clic en Publicar para que se activen.

This content requires Functional cookies to be enabled.

Update Cookie Settings

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.
  

Recursos adicionales