Skip to main content
Usa fuentes personalizadas para diseñar una página con un branding único que coincida con la identidad de tu negocio.

​
Descripción general

Aunque Kajabi ofrece muchas fuentes nativas en el Page Builder, también puedes insertar fuentes personalizadas de fuentes como Google Fonts o Adobe Fonts. Sin importar tu plan de Kajabi, puedes agregar fuentes personalizadas a tu página sin necesidad de usar el editor de código.
Nota: Completar los pasos de esta guía requiere trabajar con código HTML y CSS. Si no estás familiarizado con HTML y CSS, te recomendamos consultar con un profesional de diseño web sobre cómo agregar código de inserción a tu sitio de Kajabi.
Nota: Si usas las Plantillas Legadas de Premier, agregar fuentes personalizadas requerirá acceso al Editor de código. Para ayuda con la inserción de código en Premier, consulta la guía aquí. Esta guía se refiere al Page Builder más reciente del sitio web y no requiere acceso al Editor de código, disponible únicamente con el Plan Pro.

​
Insertar fuentes personalizadas

Esta guía te muestra cómo agregar una fuente personalizada usando un código de inserción.

​
¿Qué es un código de inserción?

Un código de inserción es un fragmento de código generado por un tercero y compartido contigo para permitirte agregar código de una fuente externa a tu propio sitio web. Con Kajabi, puedes usar códigos de inserción para agregar una gran variedad de contenido multimedia a tu sitio, como insertar un video de YouTube o, en este caso, una fuente. Solo necesitas insertar el código de inserción en el campo o campos de código personalizado correctos dentro del Page Builder. El código insertado suele ser código HTML o CSS (Kajabi también ofrece la posibilidad de insertar código JavaScript mediante el Page Builder, pero no se necesita JavaScript para insertar una fuente personalizada).
Importante: Agregar código personalizado a tu sitio puede exponerte a vulnerabilidades y posibles ataques de malware. Te recomendamos usar herramientas de detección de vulnerabilidades como VirusTotal o Snyk para escanear cualquier código personalizado que planees usar, y aplicar ciertas mejores prácticas para ayudar a reducir el impacto potencial.

​
¿Qué son HTML y CSS?

Hypertext Markup Language (HTML) y Cascading Style Sheets (CSS) son los pilares del diseño web frontend.

​
HTML

El código HTML genera la estructura de tu página. Cada fragmento de texto en tu página web es un elemento HTML envuelto en etiquetas de código HTML. Por ejemplo, un elemento de párrafo HTML estaría encerrado entre una etiqueta de apertura <p> y una de cierre </p>, así: <p>Hello World!</p> Cuando un visitante ve tu página, no puede ver las etiquetas HTML. Solo se muestra el texto contenido en ellas.

​
CSS

El CSS determina el diseño de tu página. Puedes controlar la apariencia visual de cada elemento HTML de tu sitio web, incluida la fuente utilizada para tus elementos de texto, modificando tu código CSS. Es posible cambiar la fuente solo de un elemento de texto específico o de todos los elementos de texto de tu página. En esta guía, te explicaremos cómo lograr ambas cosas.

​
Agregar una fuente personalizada a toda una página

Al agregar un código de inserción a tu página de Kajabi, puedes darle estilo a tu texto con una fuente personalizada que se ajuste mejor a tu marca. En este ejemplo, te mostraremos cómo agregar una fuente personalizada de Google Fonts. También puedes usar este procedimiento para insertar código de otros proveedores de fuentes personalizadas, como Adobe Fonts. Haz clic aquí para aprender a obtener el código de Adobe Fonts.

​
Paso 1. Obtén tu código de inserción de Google Font

  1. Haz clic aquí para acceder al panel de Google Fonts.
  2. Haz clic en la fuente que desees para abrir sus detalles.
  3. Desplázate hasta la sección Styles y localiza el estilo de fuente que deseas.
  4. Haz clic en el enlace azul del estilo de fuente a la derecha de tu estilo para abrir el menú lateral derecho. (Texto de ejemplo del enlace: Regular 400).
  5. En la sección “Use on the web”, selecciona el botón de opción junto a <link>.
  6. Selecciona y copia el código HTML.

​
Paso 2. Pega el código HTML en tu página

  1. En una pestaña de navegador separada, inicia sesión en tu cuenta de Kajabi.
  2. Abre la pestaña Website desde tu Dashboard de Kajabi.
  3. Haz clic en Pages.
  4. Selecciona la página donde deseas agregar tu fuente personalizada.
  5. En el editor lateral, selecciona Add Section.
  6. Elige una Sección de Custom Code de la lista y haz clic en Add.
  7. Haz clic para abrir el bloque de Custom Code en el editor lateral.
  8. Pega tu código de inserción en el campo Code.

​
Paso 3. Pega el código CSS en tu página

  1. En la parte superior del panel lateral izquierdo, haz clic en el enlace Back dos veces.
  2. Abre la pestaña Settings.
  3. Haz clic en Custom Code.
  4. Ingresa el siguiente código CSS en el campo CSS Code:
Este código aplicará tu fuente personalizada a cada elemento HTML de encabezado 1, encabezado 2, encabezado 3, encabezado 4 y párrafo en tu página. Agrega o quita elementos de texto HTML según lo desees. Aprende más sobre encabezados y párrafos en HTML.
  1. Regresa a Google Fonts en tu otra pestaña del navegador.
  2. En la sección “Use on the web” del panel lateral, localiza CSS rules to specify families.
  3. Selecciona y copia el código CSS.
  4. Regresa a tu página de Kajabi.
  5. Reemplaza YOUR CODE HERE con el fragmento de código que copiaste.
  6. Haz clic en Save para guardar tus cambios y aplicar tu fuente.

​
Agregar una fuente personalizada a un solo elemento de texto

Al agregar un código de inserción a tu página de Kajabi, puedes darle estilo a tu texto con una fuente personalizada que se ajuste mejor a tu marca. En este ejemplo, te mostraremos cómo agregar una fuente personalizada de Google Fonts. También puedes usar este procedimiento para insertar código de otros proveedores de fuentes personalizadas, como Adobe Fonts. Haz clic aquí para aprender a obtener el código de Adobe Fonts.

​
Paso 1. Obtén tu código de inserción de Google Font

  1. Haz clic aquí para acceder al panel de Google Fonts.
  2. Haz clic en la fuente que desees para abrir sus detalles.
  3. Desplázate hasta la sección Styles y localiza el estilo de fuente que deseas.
  4. Haz clic en el enlace azul del estilo de fuente a la derecha de tu estilo para abrir el menú lateral derecho. (Texto de ejemplo del enlace: Regular 400).
  5. En la sección “Use on the web”, selecciona el botón de opción junto a @import.
  6. Selecciona y copia el código CSS entre las etiquetas <style> y </style>.

​
Paso 2. Pega el código de importación en tu página

  1. En una pestaña de navegador separada, inicia sesión en tu cuenta de Kajabi.
  2. Abre la pestaña Website desde tu Dashboard de Kajabi.
  3. Haz clic en Pages.
  4. Selecciona la página donde deseas agregar tu fuente personalizada.
  5. En el editor lateral, haz clic en la pestaña Settings.
  6. Haz clic en Custom Code.
  7. En el campo CSS Code, pega el código que copiaste en el Paso 1.
  8. Haz clic en Save para guardar tus cambios.

​
Paso 3. Agrega código CSS en línea a tu elemento de texto

  1. Selecciona el bloque de texto que contiene el texto que deseas personalizar o crea uno nuevo.
  2. En el editor lateral, localiza el editor de texto y haz clic en el ícono de código fuente <>.
  3. Copia el siguiente fragmento de código HTML:
<span style="YOUR FONT FAMILY CODE HERE">
  1. Localiza el elemento de texto HTML que deseas actualizar.
  2. Pega el fragmento de código justo después de la etiqueta HTML de apertura. (Ejemplo: pegar el código después de la etiqueta <h2> actualizará la fuente de tu encabezado 2).
  3. Ingresa una etiqueta de cierre span </span> justo antes de la etiqueta HTML de cierre. (Ejemplo: si pegaste el primer fragmento después de una etiqueta <h2>, coloca </span> justo antes de la etiqueta </h2>, así):
<h2><span style="YOUR FONT FAMILY CODE HERE">Text Here</span></h2>
  1. Regresa a Google Fonts en tu otra pestaña del navegador.
  2. En la sección “Use on the web” del panel lateral, localiza CSS rules to specify families.
  3. Selecciona y copia el código CSS.
  4. Regresa a tu página de Kajabi.
  5. Reemplaza YOUR FONT FAMILY CODE HERE con el fragmento de código que copiaste. (Ten cuidado de no eliminar ninguna comilla al pegar tu código).
  6. Haz clic en Ok, luego en Save para guardar tus cambios y aplicar tu fuente.

​
Usar Adobe Fonts en lugar de Google Fonts

Para agregar una fuente personalizada a tu sitio de Kajabi, primero necesitarás obtener el código de inserción. En la guía anterior, agregamos una fuente de Google a nuestro sitio. Se pueden usar los mismos pasos para agregar una fuente de Adobe una vez que tengas tu código de Adobe Font en mano.

​
Elige una nueva fuente de Adobe y localiza tu código

  1. Haz clic aquí para acceder al panel de Adobe Fonts.
  2. Inicia sesión en tu cuenta de Adobe o crea una nueva cuenta.
  3. Haz clic en Browse all fonts.
  4. Selecciona la fuente personalizada que deseas usar y haz clic en el ícono de código </>. (¿No ves el ícono de código? Verifica si iniciaste sesión en tu cuenta).
  5. En la ventana emergente “Add fonts to a Web Project”, haz clic en la flecha desplegable y selecciona + Create a new project.
  6. Ingresa un nombre para tu proyecto web y haz clic en Create.
  7. Una vez creado tu proyecto, podrás copiar todos los códigos de inserción que necesites directamente desde la ventana emergente.

​
Localiza tu código existente de Adobe Font

¿Ya tienes una fuente personalizada de Adobe guardada en tu cuenta pero no sabes dónde encontrar el código? Sigue estos pasos:
  1. Haz clic aquí para acceder al panel de Adobe Fonts.
  2. Inicia sesión en tu cuenta de Adobe.
  3. En la esquina superior derecha de la pantalla de tu panel, haz clic en Manage fonts.
  4. Selecciona la pestaña Web Projects.
  5. Encuentra tu primer fragmento de código de inserción en la sección Embed Project.
  6. Para acceder a tu código CSS de font-family, haz clic en la imagen de la fuente a la izquierda.
  7. Desplázate hasta la sección Details, en How to Use.
  8. Encuentra tu código CSS en Web.
Nota: Para más detalles sobre cómo actualizar el código CSS de fuentes, consulta esta guía.