--- title: "Cómo configurar una fuente de cabecera personalizada en la base de conocimiento" slug: "how-to-configure-a-custom-header-font-in-the-knowledge-base" description: "Get the header font details and add the font link to the header section in Custom HTML. Then, add the font family details in the Custom CSS. Get the Google font code details → Append the code in custom HTML → Append the code in custom CSS" updated: 2026-06-22T08:48:10Z published: 2026-06-22T08:48:10Z canonical: "docs.document360.com/how-to-configure-a-custom-header-font-in-the-knowledge-base" excludeFromExternalSearch: true --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # 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](https://fonts.google.com/). 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. ![Selecting a font and copying the embed code from Google Fonts](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Google%20fonts%20GIF.gif) --- ### Paso 2 - Añadir el enlace de la fuente a HTML personalizado 1. En el portal Document360, navega a **Conexiones** > **Integraciones**. 2. **Selecciona HTML personalizado** y haz clic **en Añadir**. La `Header (above </head>)` opción está seleccionada por defecto, mantén esta selección. 3. Pega el código de incrustación copiado en el paso 4 en la sección **de Encabezado** . 4. Haz clic **en Añadir**. ![Adding the Google Font embed code to the Custom HTML Header section in Document360](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Configuring%20custom%20header%20font.gif) --- ### Paso 3 - Aplicar la fuente en CSS personalizado 1. 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. ![Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png) 2. La pestaña **CSS personalizada** está seleccionada por defecto. Haz clic en **el botón Añadir fragmentos de código** . 3. 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*/ } ``` 1. 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. 2. Actualiza el `color` valor con el color de fuente que deseas. 3. Haz clic **en Guardar**. ![Custom CSS tab showing the font family and colour settings applied for the custom Google Font](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Heading%20font%20-%20custom%20css.png) --- ## 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. ![Side-by-side comparison showing the knowledge base before and after applying a custom Google Font](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Before%20After%20Header%20font%20change.png) --- ## 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.