Cómo usar fuentes personalizadas en los formularios de registro

Objetivos del artículo

Aprende a diseñar tu formulario de registro con fuentes personalizadas para que tu cliente experimente una fuerte identidad de marca y coherencia con el resto de tu sitio.

Crear un formulario de registro con un diseño atractivo es primordial para obligarles a cumplir 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 hacer que tus formularios tengan un aspecto coherente con el resto de tu sitio. Una vez que hayas añadido tus fuentes, podrás utilizarlas para personalizar tu formulario de registro como mejor te parezca.

Términos clave

• Fuente personalizada
  Cualquier fuente que no esté incluida por defecto en el editor Klaviyo. Esto incluye
  • Google Fonts
  • Adobe Fonts
  • Fuentes importadas
• Fuente segura para la web
  Una fuente que se tienda, comercio localmente en la mayoría de los dispositivos y que, por tanto, no necesita cargarse desde una fuente externa para mostrarse.
• Fuente de reserva
  Una fuente segura para la web que se utiliza si una página no puede cargar la fuente principal.

Añadir fuentes personalizadas a tu cuenta

Desde el menú principal de la izquierda, navega hasta el Contenido > Imágenes & Marca. Desde ahí, haz clic en la pestaña Fuentes. Puedes añadir una fuente Google, una fuente Adobe o una fuente importada.

Añadir una fuente Google

Para añadir una fuente de Google:

1. Selecciona el desplegable Nombre de fuente para ver una lista de todas las fuentes de Google disponibles, excepto las fuentes que ya tengas cargadas en tu cuenta.
2. Elige el tipo de letra que desees. Al seleccionarla, verás una vista previa de la fuente debajo del desplegable, así como el número de variantes posibles (por ejemplo, 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.
3. Selecciona una fuente Fallback.
4. Haz clic en Añadir fuente. Tu fuente añadida aparecerá ahora en la sección Tus fuentes, en la parte inferior de la página.

En 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 sobre la fuente.

Añadir una fuente Adobe

Para añadir una fuente de Adobe:

1. Navega hasta Fuentes Adobe.
2. Busca el enlace de tu fuente Adobe y, a continuación, selecciona tu fuente.
3. Junto al nombre de tu fuente, haz clic en el icono de código.
4. Si es necesario, introduce un nuevo nombre de proyecto y haz clic en Guardar.
5. En el siguiente 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.
   
6. Navega de nuevo a Klaviyo y pega la URL en el campo Dirección CSS.
7. Selecciona Continuar y, a continuación, elige una fuente de reserva para la fuente que quieras cargar. Ten en cuenta que si una fuente ya está disponible en tu cuenta, aparecerá una marca de verificación verde junto a la fuente y se mostrará su fuente de reserva existente.
   
8. 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 sobre la fuente.

Añadir una fuente importada

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

Para añadir una fuente importada:

1. Ponle nombre a tu fuente.
2. Especifica 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 una variante adicional, selecciona Añadir variante de fuente y repite el paso 2 para esta variante.
4. 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 de la fuente.

Editar una fuente

Para editar una fuente personalizada existente:

1. Navega hasta Contenido > Imágenes & marca > Fuentes.
2. Busca la fuente que quieras editar en la sección Tus fuentes, en la parte inferior de la página.
3. En la ficha de esa fuente, haz clic en los 3 puntos de la esquina superior.
4. Elige Editar. Desde aquí, podrás
   • Edita la fuente alternativa para cualquier fuente personalizada. 
   • Sólo para las fuentes alojadas en Google y Klaviyo, edita o añade a la variante seleccionada seleccionando # de variante de fuente para ampliar la lista y, a continuación, seleccionando las fuentes que quieras añadir.
     
     

     No puedes añadir variantes a las fuentes Adobe después de subirlas, ya que las variantes están integradas en tu enlace Typekit. Para añadir variantes a una fuente Adobe, debes eliminar la fuente existente y volver a añadirla utilizando un enlace Typekit diferente que tenga todas las variantes que quieras incluir.

5. Cuando hayas terminado de editar tu fuente, selecciona actualizar fuente.

Eliminar una fuente

Para borrar una fuente:

1. Navega hasta la sección Tus Fuentes .
2. En la fuente que quieras eliminar, haz clic en los 3 puntos y luego elige Eliminar. Si eliges eliminar tu fuente, aparecerá un modal notificándote que, si tu fuente se utiliza en algún formulario, tu fuente de reserva se mostrará después de que elimines tu fuente añadida.
   
3. Selecciona Eliminar.

Una vez eliminada una fuente personalizada, todos los formularios de Klaviyo que la utilicen volverán inmediatamente a la fuente alternativa. Si vuelves a añadir la fuente, esos formularios empezarán a utilizarla de nuevo. 

Utilizar fuentes personalizadas en el formulario de registro builder

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

1. Ve a la pestaña Formulario de registro.
2. Busca el formulario que quieras editar y haz clic en los 3 puntos que hay 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. Utiliza el 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 al principio de la lista. 
   

   Mientras editas, tu 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 de la izquierda mostrará tu fuente alternativa en lugar de la fuente personalizada.

6. Cuando estés satisfecho con tus cambios, haz clic en Publicar para activarlos.

Fuente del sitio afectada por Klaviyo.js

Klaviyo con actividad Seguimiento in situ (Klaviyo.js), debe instalarse manualmente o a través de tus integraciones en ecommerce para poder publicar Klaviyo formulario de registro en tu sitio web. Si sólo has cargado alguna variante de fuente, Klaviyo.js carga el resto de variantes de tu biblioteca cuando se inyecta en tu sitio. Por ello, las fuentes de tu sitio pueden sufrir ligeras modificaciones en este proceso, como un cambio en el peso de la cabecera del sitio. 

Hay 2 opciones para resolver cualquier cambio que Klaviyo.js haga en tus fuentes. Puedes:

• Eliminar las fuentes relevantes de tu biblioteca de fuentes Klaviyo. 
• Actualizar la CSS del encabezado de tu sitio para que no se sobrescriba cuando Klaviyo.js suba la variante adicional. 
  

  Esta opción requeriría conocimientos amplios de las 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.

Recursos adicionales 

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