Cómo configurar una fuente personalizada en la base de conocimiento

Document360 incluye un conjunto de fuentes estándar integradas, pero puedes aplicar cualquier fuente de Google o cualquier otra fuente web al texto principal de tu base de conocimientos. Esto se hace en dos partes: cargar el archivo de fuente mediante HTML personalizado y luego aplicarlo a tu contenido mediante CSS personalizado. El proceso te da acceso a toda la biblioteca de Google Fonts para que coincida con tu marca o estilo de documentación.

NOTA

También puedes configurar fuentes personalizadas distintas de Google Fonts usando el enlace HTML de incrustación y la declaración CSS font-family correspondiente de tu proveedor de fuentes.

Cuándo usar esto

Utiliza esta personalización cuando quieras:

• Aplica una fuente específica de Google al texto principal que no esté incluida en la lista de fuentes predeterminada de Document360.
• Ajusta la tipografía de tu documentación a las directrices de tu producto o marca.
• Mejora la coherencia visual entre tu base de conocimientos y la interfaz de tu sitio web o producto.

Antes de que empieces

• Necesitas acceso a Conexiones > Integraciones > HTML Personalizado en el portal de la Base de Conocimientos para completar el Paso 2.
• Necesitas acceso a Configuración (
  ) > Base de conocimientos > Personalización del sitio > CSS y JavaScript personalizados para completar el Paso 3.
• Los tres pasos son necesarios para que la fuente se renderice correctamente. Cargar la fuente sin aplicar el CSS, o aplicar el CSS sin cargar la fuente, no tendrá ningún efecto visible.

Cómo configurar una fuente personalizada de texto del cuerpo

Paso 1 - Conseguir el código de incrustación de Google Font

1. Ve a Google Fonts.

2. Selecciona la fuente deseada. La página de la fuente aparece con los estilos disponibles.

3. En la esquina superior derecha, haz clic en Obtener fuente y luego selecciona Incorporar código.

   En la sección Web aparece el código de inserción para la fuente que elijas.

4. Haz clic en Copiar para copiar el código de incrustación y luego vuelve a Document360.

Paso 2 - Añadir el enlace de la fuente a HTML personalizado

5. Navega hasta Conexiones > Integraciones en la barra de navegación izquierda del portal de la base de conocimiento.

6. Ve a la sección de HTML personalizado y haz clic en Añadir.

   La Header (above </head>) opción está seleccionada por defecto, mantén esta selección.

7. Pega el código de incrustación copiado en el paso 4 en la sección de Encabezado .

8. Haz clic en Añadir.

   

Paso 3 - Aplicar la fuente en CSS personalizado

9. Navega a Configuración (

   ) > Sitio de la base de conocimiento en la barra de navegación izquierda del portal de la base de conocimiento.

10. En el panel de navegación izquierdo, navega a Personalización del sitio > CSS & JavaScript personalizados.

    

11. Desde el panel de navegación izquierdo, selecciona la pestaña CSS .

12. Haz clic en Añadir fragmentos de código en la esquina superior derecha del espacio de código.

13. Selecciona la opción Cambiar fuente del texto principal . Aparece la siguiente plantilla de código:

body, article {
  font-family: "Source Sans Pro", sans-serif;    /*Replace your body font family*/ 
  color: #222222;    /*Font color*/ 
}

14. Asegúrate de que el article selector esté incluido junto al body selector en el fragmento; ambos son necesarios para aplicar la fuente en todo el contenido del artículo y en toda la página.
15. Sustituye font-family: "Source Sans Pro", sans-serif; por las reglas CSS para especificar familias del código de incrustación copiado en el paso 4.
16. Actualiza el color valor con el color de fuente que deseas.
17. Haz clic en Guardar en la esquina superior derecha.

La fuente seleccionada ahora se aplica a tu base de conocimientos. Visita la página de la base de conocimientos para previsualizar los cambios.

Mejores prácticas

• Completa los tres pasos en orden. Cargar la fuente en HTML personalizado la pone a disposición del navegador, pero no la aplica. El CSS del Paso 3 indica al navegador dónde usarlo. Ambos pasos son obligatorios y deben hacer referencia al mismo nombre de fuente.
• Incluye ambos body y article seleccionadores. El article selector asegura que la fuente se aplique dentro del contenido del artículo, no solo a los elementos de la página circundantes. Sin ella, el texto principal en los artículos puede no cambiar.
• Usa exactamente el font-family valor del código de embed. Google Fonts proporciona la cadena CSS font-family precisa bajo "Reglas CSS para especificar familias." Copia este valor exactamente, incluyendo la pila de respaldo, para evitar que se generen inconsistencias entre navegadores.
• Mantén la fuente de respaldo. La sans-serif opción de respaldo font-family: "Your Font", sans-serif; garantiza que los lectores vean una fuente legible incluso si la fuente de Google no se carga. Incluye siempre un plan B genérico.
• Carga solo los pesos de fuente que necesites. Al copiar el código incrustado de Google Fonts, selecciona solo los pesos específicos que use tu documentación (por ejemplo, Regular 400 y Bold 700). Cargar todos los pesos disponibles aumenta el tiempo de carga de la página sin ningún beneficio.
• Prueba en tu base de conocimientos en tiempo real después de guardar. Los cambios de fuente se aplican a todo el sitio. Abre varios tipos de artículos tras guardar para confirmar que la fuente carga y se muestra correctamente.