--- title: "Comment configurer une police d’en-tête personnalisée dans la base de connaissances" 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" tags: ["CSS Snippets", "Custom font"] updated: 2026-06-22T08:31:03Z published: 2026-06-22T08:31:03Z 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. # Comment configurer une police d’en-tête personnalisée dans la base de connaissances Document360 inclut un ensemble de polices d’en-tête intégrées, mais vous pouvez aller au-delà des options par défaut en chargeant n’importe quelle police de Google Fonts dans votre base de connaissances. Cela se fait en deux parties : charger le fichier de police via HTML personnalisé, puis l’appliquer à votre contenu via le CSS personnalisé. Le processus prend environ cinq minutes et vous donne accès à toute la bibliothèque Google Fonts, à plus de 1 500 polices, pour correspondre à votre marque ou à votre style de documentation. --- ## Quand utiliser cela Utilisez cette personnalisation lorsque vous souhaitez : - Appliquez une police Google spécifique qui n’est pas incluse dans la liste de polices par défaut de Document360. - Associez la typographie de votre documentation aux directives de votre produit ou de votre marque. - Améliorez la cohérence visuelle entre votre base de connaissances et votre site web ou interface produit. --- ## Avant que tu commences - Vous avez besoin d’accéder aux **Connexions** > **Intégrations** > **HTML personnalisé** dans le portail de la base de connaissances pour compléter l’étape 2. - Vous avez besoin d’accéder aux **paramètres** ( ) > **site de base de connaissances** > **personnalisation du site** > **CSS & JavaScript personnalisés** pour compléter l’étape 3. - Ce guide utilise Google Fonts comme source d’exemple, mais la même approche fonctionne avec toute police web qui fournit un lien HTML intégré et une déclaration CSS `font-family` . - Le processus comprend trois étapes séquentielles : obtenir le code de la police, l’ajouter au HTML personnalisé, puis l’appliquer dans le CSS personnalisé. Les trois étapes sont nécessaires pour que la police soit correctement affichée. --- ## Comment configurer une police Google dans Document360 ### Étape 1 - Obtenir le code d’intégration Google Font 1. Allez sur [Google Fonts](https://fonts.google.com/). 2. Sélectionnez la police souhaitée. La page de police apparaît avec les styles disponibles. 3. En haut à droite, cliquez sur **Obtenir une police**, puis sélectionnez **Intégrer le code**. Dans la section **Web** , le code d’intégration de la police choisie apparaît. 4. **Cliquez sur Copier le code** pour copier le code d’intégration, puis revenez à 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) --- ### Étape 2 - Ajouter le lien de la police à Custom HTML 1. Dans le portail Document360, allez dans **Connexions** > **Intégrations**. 2. **Sélectionnez HTML personnalisé** et cliquez **sur Ajouter**. L’option `Header (above </head>)` est sélectionnée par défaut, gardez cette sélection. 3. Collez le code d’intégration copié à l’étape 4 dans la section **En-tête** . 4. **Cliquez sur Ajouter**. ![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) --- ### Étape 3 - Appliquer la police dans un CSS personnalisé 1. Naviguer dans **les paramètres** ( ) > **site de base de connaissances** > **personnalisation du site** > **CSS & JavaScript personnalisés** dans le portail de la base de connaissances. ![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. **L’onglet CSS personnalisé** est sélectionné par défaut. Cliquez sur le bouton **Ajouter des extraits de code**. 3. Sélectionnez l’option **Changer la police d’en-tête** . Le modèle de code suivant apparaît : ``` body { font-family: "Source Sans Pro", sans-serif; /*Replace your body font family*/ color: #222222; /*Font color*/ } ``` 1. Remplacez-les `font-family: "Source Sans Pro", sans-serif;` par les règles CSS pour spécifier les familles à partir du code d’intégration que vous avez copié à l’étape 4. 2. Mettez à jour la `color` valeur avec la couleur de police que vous souhaitez. 3. **Cliquez sur Enregistrer**. ![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) --- ## Conséquences La police personnalisée est désormais appliquée à l’ensemble de votre base de connaissances. Les pages avant et après ci-dessous montrent la différence de typographie après avoir complété les trois étapes. ![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) --- ## Meilleures pratiques - **Terminez les trois étapes dans l’ordre.** Charger la police en HTML personnalisé sans l’appliquer dans le CSS personnalisé n’aura aucun effet visible ; La police sera disponible pour le navigateur mais n’est pas assignée à un élément. De même, ajouter une `font-family` déclaration dans CSS sans charger d’abord le fichier de police fera revenir le navigateur à la police par défaut. - **Utilisez exactement la `font-family` valeur du code d’intégration.** Google Fonts fournit la chaîne CSS `font-family` précise dans le code d’intégration sous « règles CSS pour spécifier les familles ». Copiez cette valeur exactement, y compris la pile de secours, pour éviter les incohérences entre navigateurs. - **Testez sur plusieurs navigateurs après avoir sauvegardé.** Le rendu des polices peut varier légèrement entre Chrome, Safari, Firefox et Edge. Prévisualisez votre base de connaissances dans au moins deux navigateurs pour confirmer que la police se charge et s’affiche correctement. - **Gardez la police de secours.** Le `sans-serif` plan de `font-family: "Your Font", sans-serif;` secours garantit que les lecteurs voient toujours une police lisible si la police Google ne se charge pas (par exemple, dans les environnements qui bloquent les requêtes externes). Incluez toujours un plan B générique. - **Considérez le poids et les performances de la police.** Google Fonts vous permet de sélectionner des poids spécifiques (Régulier, Gras, etc.) lors de la génération du code d’intégration. Chargez uniquement les poids dont vous avez besoin — charger tous les poids disponibles augmente le temps de chargement de la page.