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.

Si la marca usa fuentes que no están disponibles en el editor de formularios de registro, añádelas a la biblioteca de fuentes de Klaviyo antes de aplicarlas a los formularios. Puedes añadir fuentes de Google, fuentes de Adobe o archivos de fuentes importados.

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

Puedes añadir Google Fonts, Adobe Fonts o fuentes importadas a la cuenta. Primero, abre la biblioteca de fuentes:

1. Ve a Contenido > Medios y marca en el menú principal y, a continuación, selecciona la pestaña Marca.
2. Selecciona Fuentes en la barra lateral. Si la barra lateral muestra Estilo en su lugar, selecciónalo y busca la sección Fuentes.

Añadir una fuente de Google

Para añadir una fuente de Google, sigue estos pasos:

1. Haz clic en Añadir fuente y, a continuación, selecciona Google Font.
2. Abre el menú desplegable Google Font para ver las fuentes disponibles. También puedes consultar Google fonts para comparar opciones. Si la fuente ya está en la biblioteca, edita esa fuente en lugar de añadirla otra vez.
3. Elige la fuente que quieras para ver una vista previa y las variantes disponibles (p. ej., negrita o cursiva).
   • Abre Variantes de fuente y selecciona los grosores y estilos que quieras usar. Normal 400 es obligatorio y no se puede eliminar.
4. Selecciona una Fuente alternativa.
5. Pulsa Guardar. La fuente que has añadido se mostrará en la sección Fuentes.

This content requires Functional cookies to be enabled.

Update Cookie Settings

En la sección Fuentes, puedes ver las fuentes añadidas a la cuenta. Para editar o eliminar una fuente, selecciona los tres puntos que aparecen junto a ella.

Añadir una fuente de Adobe

Para añadir una fuente de Adobe, sigue estos pasos:

1. Ve a Adobe Fonts.
2. Busca la fuente que quieres usar y selecciónala.
3. Haz clic en el icono de código (</>) o en Añadir al proyecto web.
4. Elige un proyecto web existente o crea uno nuevo. Selecciona los grosores y estilos de fuente que quieras incluir y, a continuación, guarda el proyecto.
5. Copia la URL de la hoja de estilo que empieza por https://use.typekit.net/ del código de inserción del proyecto. Puedes incluir la extensión .css.

This content requires Functional cookies to be enabled.

Update Cookie Settings

6. Vuelve a la biblioteca de fuentes en Klaviyo. Haz clic en Añadir fuente, selecciona Adobe Fonts y, a continuación, pega la URL en Dirección CSS de Adobe Fonts.
7. Haz clic en Ver fuentes y, a continuación, selecciona una Fuente de reserva para cada nueva familia de fuentes del proyecto. Una fuente que ya está en tu cuenta tiene una marca de verificación y muestra su fuente de reserva existente.

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. Pulsa Guardar.

Una vez que hayas añadido las fuentes, aparecerán en la sección Fuentes. Para editar una fuente, selecciona los tres puntos junto a ella.

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:

1. Haz clic en Añadir fuente y, a continuación, selecciona Fuente personalizada.
2. Introduce un nombre en Nombre de fuente personalizada. Elige un nombre que no esté ya en la biblioteca de fuentes.
3. Introduce la URL de origen del archivo de fuente y, a continuación, selecciona el grosor de la fuente y el estilo de fuente. Utiliza una URL HTTPS accesible con un nombre de archivo que termine en .woff, .woff2, .ttf o .eot. No se admiten archivos SVG.
4. Opcional: para añadir otra variante, haz clic en Añadir variante de fuente e introduce la URL de origen, el grosor y el estilo. Usa una URL de origen diferente y una combinación de grosor/estilo diferente para cada variante.
5. Selecciona una Fuente alternativa.
6. Haz clic en Guardar para añadir la fuente a la sección Fuentes.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Desde Fuentes, puedes ver las fuentes importadas en la cuenta. Para eliminar o editar una fuente, selecciona los 3 puntos que hay al lado.

Editar una fuente

Para editar una fuente personalizada existente:

1. Dirígete a Contenido > Multimedia y marca y selecciona Marca. Selecciona Fuentes en la barra lateral, o selecciona Estilo y busca Fuentes si esa es la opción que se muestra en la barra lateral.
2. Busca la fuente que quieras editar en la sección Fuentes.
3. Haz clic en los 3 puntos junto a la fuente.
4. Elige Editar fuente. Desde aquí, puedes:
   • Edita la fuente de reserva para cualquier fuente personalizada.
   • Para las fuentes de Google, selecciona Variantes de fuente para añadir o eliminar grosores y estilos. Normal 400 debe permanecer seleccionado.
   • En el caso de las fuentes importadas, incluidas las fuentes alojadas por Klaviyo, edita la URL de origen, el grosor o el estilo de una variante. Usa Añadir variante de fuente para añadir otro archivo o haz clic en el icono de papelera junto a una variante para eliminarla. Mantén al menos 1 variante.

1. Cuando hayas terminado de editar una fuente en Klaviyo, haz clic en Guardar.

Elimina una fuente

Para eliminar una fuente:

1. Dirígete a Contenido > Multimedia y marca y selecciona Marca. Selecciona Fuentes en la barra lateral, o selecciona Estilo y busca Fuentes si esa es la opción que se muestra en la barra lateral.
2. En la fuente que quieras eliminar, haz clic en los 3 puntos y selecciona Eliminar. Se abre un cuadro de diálogo de confirmación. Los formularios que usen la fuente mostrarán su fuente alternativa cuando la fuente eliminada ya no pueda cargarse.

3. Selecciona Eliminar.

Después de eliminar una fuente personalizada, los formularios que la usen mostrarán la fuente de reserva cuando la fuente personalizada ya no pueda cargarse. Si vuelves a añadir la misma familia de fuentes, esos formularios podrán volver a usarla.

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:

1. Ve a la pestaña formularios de registro.
2. Busca el formulario que quieras editar y haz clic en los tres puntos que aparecen junto a él. Luego, selecciona Editar.
3. En la vista previa del formulario, selecciona el texto que quieras editar.
4. En el editor de texto, resalta el texto que quieras dar formato.
5. Usa el menú desplegable de fuentes en el editor de texto para seleccionar tu fuente personalizada y la variante en Tus fuentes.

1. Cuando estés satisfecho con los cambios, haz clic en Publicar o programar.
2. Selecciona la opción Publicar ahora. Resuelve las alertas de bloqueo que se muestren y, luego, haz clic en el botón Publicar ahora para publicar los cambios.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Fuente del sitio afectada por Klaviyo.js

Klaviyo seguimiento en el sitio (Klaviyo.js) debe instalarse manualmente o a través de la integración de comercio electrónico para mostrar los formularios de registro de Klaviyo en el sitio web. Klaviyo.js carga Google y las variantes de fuentes importadas guardadas en la biblioteca de fuentes, así como la hoja de estilos de cada proyecto web de Adobe que hayas añadido. Si el sitio web usa la misma familia tipográfica, estas definiciones pueden afectar a su apariencia, como el grosor de un encabezado.

Hay dos opciones para evitar que Klaviyo.js realice cambios en tus fuentes:

• Elimina las fuentes relevantes de tu repositorio de fuentes de Klaviyo. Los formularios que usan esas fuentes mostrarán sus fuentes de reserva cuando las fuentes eliminadas ya no puedan cargarse.
• Actualiza las definiciones de CSS y fuentes del sitio web para que no entren en conflicto con las familias de fuentes, los grosores y los estilos cargados por Klaviyo.js.

Recursos adicionales