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

Document360 incluye un conjunto de fuentes de cabecera integradas, pero puedes ir más allá de las opciones predeterminadas cargando cualquier fuente de Google Fonts en 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 dura unos cinco minutos y te da acceso a toda la biblioteca de Google Fonts, más de 1.500 tipografías, para que coincidan con tu marca o estilo de documentación.

Cuándo usar esto

Utiliza esta personalización cuando quieras:

• Aplica una fuente específica de Google 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 conocimiento > Personalización del sitio > CSS y JavaScript personalizados para completar el Paso 3.
• Esta guía utiliza Google Fonts como ejemplo fuente, pero el mismo enfoque funciona con cualquier fuente web que proporcione un enlace HTML embed y una declaración CSS font-family .
• El proceso implica tres pasos secuenciales: obtener el código de la fuente, añadirlo a HTML personalizado y luego aplicarlo en CSS personalizado. Los tres pasos son necesarios para que la fuente se renderice correctamente.

Cómo configurar una fuente de Google en Document360

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 código para copiar el código de incrustación, luego vuelve a Document360.

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

5. En el portal Document360, navega a Conexiones > Integraciones.
6. Selecciona 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 > Personalización del sitio > CSS y JavaScript personalizados en el portal de la base de conocimiento.

   

10. La pestaña CSS personalizada está seleccionada por defecto. Haz clic en el botón Añadir fragmentos de código .

11. Selecciona la opción de Cambiar fuente del encabezado . Aparece la siguiente plantilla de código:

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

12. Sustituye font-family: "Source Sans Pro", sans-serif; por las reglas CSS para especificar familias del código embebido que copiaste en el paso 4.
13. Actualiza el color valor con el color de fuente que deseas.
14. Haz clic en Guardar.

Resultado

La fuente personalizada ahora se aplica en toda tu base de conocimientos. El antes y el después a continuación muestran la diferencia en la tipografía tras completar los tres pasos.

Mejores prácticas

• Completa los tres pasos en orden. Cargar la fuente en HTML personalizado sin aplicarla en CSS personalizado no tendrá efecto visible; La fuente estará disponible para el navegador pero no se asignará a ningún elemento. Igualmente, añadir una font-family declaración en CSS sin cargar primero el archivo de fuente hará que el navegador vuelva a la fuente predeterminada.
• Usa exactamente el font-family valor del código de embed. Google Fonts proporciona la cadena CSS font-family precisa en el código de incrustación bajo "Reglas CSS para especificar familias." Copia este valor exactamente, incluyendo la pila de respaldo, para evitar que se generen inconsistencias entre navegadores.
• Prueba en varios navegadores después de guardar. El renderizado de fuentes puede variar ligeramente entre Chrome, Safari, Firefox y Edge. Previsualiza tu base de conocimientos en al menos dos navegadores para confirmar que la fuente carga y se muestra correctamente.
• Mantén la fuente de respaldo. El sans-serif sistema de respaldo font-family: "Your Font", sans-serif; garantiza que los lectores sigan viendo una fuente legible si la fuente de Google no se carga (por ejemplo, en entornos que bloquean solicitudes externas). Incluye siempre un plan B genérico.
• Considera el peso de la fuente y el rendimiento. Google Fonts te permite seleccionar pesos específicos (Regular, Negrita, etc.) al generar el código de embebido. Carga solo los pesos que necesites: cargar todos los pesos disponibles aumenta el tiempo de carga de la página.