Cómo utilizar fuentes personalizadas en formularios de inscripción

Qué aprenderás

Aprenda a diseñar sus formularios de inscripción con fuentes personalizadas para que sus clientes experimenten una fuerte identidad de marca y coherencia con el resto de su sitio.

Crear un formulario de registro con un diseño atractivo es primordial para obligarles a cumplir el objetivo de su formulario. Si su 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 hacer que sus formularios tengan un aspecto cohesivo con el resto de su sitio. Una vez que haya añadido sus fuentes, podrá utilizarlas para personalizar su formulario de registro como mejor le parezca.

Términos clave

• Fuente personalizada
  Cualquier fuente que no se proporcione por defecto en el editor Klaviyo. Esto incluye:
  • Fuentes de Google
  • Fuentes de Adobe
  • Fuentes importadas
• Fuente segura para la web
  Una fuente que es negocio localmente en la mayoría de los dispositivos, y por lo tanto no necesita ser cargado desde una fuente externa con el fin de mostrar.
• Fuente de reserva
  Una fuente segura para la web que se utiliza si una página no puede cargar la fuente primaria.

Añadir fuentes personalizadas a su cuenta

En el menú principal del lado izquierdo, navegue hasta el Contenido > Imágenes & Marca. Desde ahí, haga clic en la pestaña Fuentes. Puede añadir una fuente Google, una fuente Adobe o una fuente importada.

Añadir una fuente Google

Para añadir una fuente Google:

1. Seleccione el menú desplegable Nombre de fuente para ver una lista de todas las fuentes de Google disponibles, excepto las fuentes que ya haya cargado en su cuenta.
2. Elija el tipo de letra que desee. Al seleccionarla, verá una vista previa de la fuente debajo del desplegable, así como el número de variantes posibles (por ejemplo, negrita, cursiva, etc.).
   • Si desea añadir más de una variante, haga clic en la flecha situada junto al número de variantes posibles y elija las fuentes que desee añadir.
3. Seleccione una fuente Fallback.
4. Haga clic en Añadir fuente. Su fuente añadida aparecerá ahora en la sección Sus fuentes, en la parte inferior de la página.

En la sección Sus fuentes , podrá ver las fuentes que ha añadido a su cuenta. Para editar o eliminar cualquiera de las fuentes de esta sección, seleccione los tres puntos de la fuente.

Añadir una fuente Adobe

Para añadir un Adobe Font:

1. Navegue hasta Adobe Fonts.
2. Busque el enlace de su fuente Adobe y selecciónela.
3. Junto al nombre de su fuente, haga clic en el icono de código.
4. Si es necesario, introduzca un nuevo nombre para el proyecto y haga clic en Guardar.
5. En el siguiente modal, copie la URL https://use.typekit.net de la fuente que desea añadir. No incluya el .css como parte de la URL cuando la copie.
   
6. Navegue de nuevo a Klaviyo y pegue la URL en el campo Dirección CSS.
7. Seleccione Continuar y, a continuación, elija una fuente Fallback para la fuente que desea cargar. Tenga en cuenta que si una fuente ya está disponible en su cuenta, aparecerá una marca de verificación verde junto a la fuente y se mostrará su fuente de reserva existente.
   
8. Seleccione Añadir fuente.

Una vez que haya añadido su fuente, aparecerá en la sección Sus fuentes , en la parte inferior de la página. Para editar cualquiera de sus fuentes en esta sección, seleccione los tres puntos sobre la fuente.

Añadir una fuente importada

Si ha comprado o descargado una fuente personalizada que no está alojada en una fuente de terceros, aún puede utilizarla en un formulario Klaviyo. En primer lugar, aloje los archivos de fuentes en una ubicación que sea accesible para Klaviyo (por ejemplo, en los activos de su sitio o en una plataforma de alojamiento de fuentes). Asegúrese de activar el uso compartido de recursos entre orígenes (CORS) estableciendo el encabezado Access-Control-Allow-Origin en *, para que los dispositivos de sus destinatarios puedan acceder a la fuente.

Para añadir una fuente importada:

1. Póngale un nombre a su fuente.
2. Especifique un peso de fuente, un 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 añadir variantes adicionales, seleccione Añadir variante de fuente y repita el paso 2 para esta variante.
4. Seleccione Añadir fuente para añadir esta fuente a la sección Sus fuentes .

En Sus fuentes, podrá ver las fuentes que ha importado a su cuenta. También puede eliminar o editar sus fuentes seleccionando los 3 puntos de la fuente.

Editar una fuente

Para editar una fuente personalizada existente:

1. Navegue hasta Contenido > Imágenes & marca > Fuentes.
2. Busque la fuente que desea editar en la sección Sus fuentes, en la parte inferior de la página.
3. En la ficha de esa fuente, haga clic en los 3 puntos de la esquina superior.
4. Seleccione Editar. Desde aquí, podrá:
   • Edite la fuente de reserva para cualquier fuente personalizada. 
   • Sólo para las fuentes alojadas en Google y Klaviyo, edite o añada a las variantes seleccionadas seleccionando # de variantes de fuentes para ampliar la lista y, a continuación, seleccionando las fuentes que desee añadir.
     
     

     No puede añadir variantes a las fuentes Adobe después de cargarlas, ya que las variantes están integradas en su enlace Typekit. Para añadir variantes a una fuente Adobe, debe eliminar la fuente existente y volver a añadirla utilizando un enlace Typekit diferente que tenga todas las variantes que desea incluir.

5. Cuando haya terminado de editar su fuente, seleccione actualizar fuente.

Borrar una fuente

Para borrar una fuente:

1. Navegue hasta la sección Sus fuentes .
2. En la fuente que desee eliminar, haga clic en los 3 puntos y elija Eliminar. Si decide eliminar su fuente, aparecerá un modal notificándole que, si su fuente se utiliza en algún formulario, su fuente de reserva se mostrará después de que elimine su fuente añadida.
   
3. Seleccione Borrar.

Una vez que se elimina una fuente personalizada, cualquier formulario en Klaviyo que actualmente utilice la fuente personalizada volverá inmediatamente a la fuente de reserva. Si vuelve a añadir la fuente, esos formularios comenzarán a utilizarla de nuevo. 

Uso de fuentes personalizadas en el formulario de registro builder

Para utilizar su fuente personalizada en un formulario de registro, sólo tiene que editar el texto en la vista previa del formulario:

1. Navegue hasta la pestaña Formulario de registro.
2. Busque el formulario que desea editar y haga clic en los 3 puntos que aparecen junto a él, después seleccione Editar formulario.
3. En la vista previa del formulario, seleccione el texto que desea editar. 
4. En el menú Texto de la derecha, resalte el texto.
5. Utilice el desplegable de fuentes de la parte superior para seleccionar su fuente personalizada. Tenga en cuenta que las fuentes de la sección Sus fuentes de su cuenta aparecerán al principio de la lista. 
   

   Mientras edita, su fuente personalizada aparecerá en el lienzo (por ejemplo, en la vista previa de edición), pero no en el panel de la izquierda. El panel lateral izquierdo mostrará su fuente de reserva en lugar de la fuente personalizada.

6. Una vez que esté satisfecho con sus cambios, haga clic en Publicar para activarlos.

Fuente del sitio afectada por Klaviyo.js

Klaviyo activo Seguimiento in situ (Klaviyo.js), debe instalarse manualmente o a través de la integración de su comercio electrónico para publicar los formularios de registro de Klaviyo en su sitio web. Si sólo ha cargado algunas variaciones de fuentes, Klaviyo.js carga las variaciones restantes en su biblioteca cuando se inyecta en su sitio. Debido a esto, las fuentes de su sitio pueden ser ligeramente editadas en este proceso, como un cambio en el peso de la cabecera del sitio. 

Hay 2 opciones para resolver cualquier cambio hecho a sus fuentes por Klaviyo.js. Puede hacerlo:

• Elimine las fuentes correspondientes de su biblioteca de fuentes Klaviyo. 
• Actualice el CSS de la cabecera de su sitio para que no se sobrescriba cuando Klaviyo.js cargue las variaciones adicionales. 
  

  Dado que esta opción requeriría un profundo conocimiento de CSS, es posible que necesite la ayuda de un desarrollador. Klaviyo no puede ofrecer asistencia para ajustar el CSS de su sitio, sin embargo contamos con una amplia red de socios.

Recursos adicionales 

• Curso: Creación de una estrategia de captación eficaz mediante formularios de registro
• Cómo alojar una fuente personalizada en su sitio