--- title: "Cómo configurar una fuente personalizada en la base de conocimiento" slug: "how-to-configure-a-custom-font-in-the-knowledge-base" description: "Get the 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" tags: ["Font", "CSS Snippets", "Custom font"] updated: 2026-06-22T08:48:10Z published: 2026-06-22T08:48:10Z canonical: "docs.document360.com/how-to-configure-a-custom-font-in-the-knowledge-base" --- > ## 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 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. > [!NOTE] > 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](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** 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 1. Navega hasta **Conexiones** > **Integraciones** en la barra de navegación izquierda del portal de la base de conocimiento. 2. 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. 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** en la barra de navegación izquierda del portal de la base de conocimiento. 2. En el panel de navegación izquierdo, navega a **Personalización del sitio** > **CSS & JavaScript personalizados**. ![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) 3. Desde el panel de navegación izquierdo, selecciona la pestaña **CSS** . 4. Haz clic **en Añadir fragmentos de código** en la esquina superior derecha del espacio de código. 5. 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*/ } ``` ![Add code snippets panel showing the Change body text font option selected](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Change%20body%20text%20font.png) 1. 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. 2. 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. 3. Actualiza el `color` valor con el color de fuente que deseas. 4. 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.