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.

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.

Étape 2 - Ajouter le lien de la police à Custom HTML

5. Dans le portail Document360, allez dans Connexions > Intégrations.
6. Sélectionnez HTML personnalisé et cliquez sur Ajouter. L’option Header (above </head>) est sélectionnée par défaut, gardez cette sélection.
7. Collez le code d’intégration copié à l’étape 4 dans la section En-tête .
8. Cliquez sur Ajouter.

Étape 3 - Appliquer la police dans un CSS personnalisé

9. 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.

   

10. L’onglet CSS personnalisé est sélectionné par défaut. Cliquez sur le bouton Ajouter des extraits de code.

11. 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*/ 
}

12. 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.
13. Mettez à jour la color valeur avec la couleur de police que vous souhaitez.
14. Cliquez sur Enregistrer.

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.

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.