Agregar fuentes personalizadas

​

Resumen

​

Hojas de Estilo en Cascada (CSS)

​

Encabezados y etiquetas de encabezado

​

Agregar una fuente personalizada para encabezados

​

Cómo seleccionar tu etiqueta de encabezado

​

Para ver y asignar la etiqueta de Encabezado a la que quieres aplicar tu fuente personalizada:

1. Abre la pestaña Website desde tu Dashboard.
2. Haz clic en Pages.
3. Entra a la página que quieres editar.
4. Selecciona el Text block que contiene el texto al que quieres agregar tu fuente personalizada.
5. Resalta el texto específico en el editor de texto.
6. Luego, haz clic en Formats en las opciones del editor de texto.
7. Selecciona Headings.
8. Selecciona la etiqueta de Encabezado que quieres usar para tu fuente personalizada.
9. Haz clic en Save para guardar y aplicar tus cambios:

​

Cómo agregar tu fuente personalizada

​

Archivo de fuente con licencia

​

Cómo subir tu archivo de fuente con licencia a tu página recién creada:

1. Primero, crea una página de recursos en tu carpeta de landing pages de Kajabi para poder referenciarla directamente desde Kajabi.
2. Abre tu página de Assets y agrega un bloque de Llamado a la Acción.
3. Escribe el nombre de tu archivo de fuente en el Button text (por ejemplo, Cameliya.ttf).
4. Luego, selecciona Download a file para la Button action.
5. Sube tu archivo de fuente.
6. Luego, haz clic en Save:

​

Cómo agregar tu archivo de fuente con licencia a tu página

​

Código TTF

@font-face {
  font-family: 'FontName';
  src: url('FONTFILENAME.ttf') format('truetype');
}
h1 {
  font-family: 'FontName', sans-serif;
}

​

Código EOT

src: url('XXXXXX.eot') format('embedded-opentype');

​

Código WOFF2

src: url('XXXXXX.woff2') format('woff2');

1. Copia la dirección del enlace de tu botón de Call to Action:
2. Haz clic derecho en tu botón de Call to Action desde tu página de Assets recién creada:
3. Luego, copia la dirección del enlace:

4. Ahora que copiaste el archivo de fuente, usa el código correspondiente según el tipo de tu archivo de fuente (.ttf, .eot, .woff2) y pégalo en el código provisto arriba.

5. Si tu archivo de fuente es de tipo .eot, usa el código de formato de fuente EOT:

src: url('FONTFILENAME.eot') format('embedded-opentype');

src: url('FONTFILENAME.woff2') format('woff2');

6. Después de agregar la dirección del enlace de tu archivo de fuente a tu código de fuente personalizada, regresa a la landing page donde quieres agregar tu fuente personalizada.

​

Para agregar el código personalizado:

1. En tu editor de páginas, abre Settings.
2. Haz clic en Custom code.
3. Luego, agrega tu código personalizado copiado que contiene el código de tu archivo de fuente en el campo de código CSS.
4. Asegúrate de hacer clic en Save para aplicar y ver tu fuente personalizada.
5. Después de agregar tu archivo de fuente a tu página de Assets, previsualiza la página.

​

Fuente personalizada para todo el sitio web

​

Luego, agrega tu fuente personalizada a tu Configuración del Sitio:

1. Abre la pestaña Settings desde tu Dashboard.
2. Haz clic en Site Details.
3. Luego, ve a Page Scripts.
4. En el campo Header Page Scripts, agrega tu código de fuente personalizada
5. Agrega etiquetas Style a tu código. Primero, la etiqueta de apertura <style> arriba de tu código de fuente personalizada, y luego la etiqueta de cierre </style> justo debajo de tu código de fuente personalizada.

<style>

@font-face {
  font-family: 'FontName';
  src: url('/resource_redirect/downloads/sites/135263/themes/2148980623/downloads/ea3IaDotWWurDhwu8x3Wd_cameliya.ttf') format('truetype');
}
h3 {
  font-family: 'FontName', sans-serif;
}

</style>

6. Luego, haz clic en Save para aplicar tu fuente personalizada a las páginas nuevas creadas en tu sitio:

<style>

@font-face {
  font-family: 'FontName';
  src: url('/resource_redirect/downloads/sites/135263/themes/2148980623/downloads/ea3IaDotWWurDhwu8x3Wd_cameliya.ttf') format('truetype');
}
body, p, ul, ol, a, .btn, .form-btn {
  font-family: 'FontName', sans-serif;
}

</style>

/resource_redirect/downloads/sites/135263/themes/2148980623/downloads/ea3IaDotWWurDhwu8x3Wd_cameliya.ttf