Comment configurer une police personnalisée dans la base de connaissances

Document360 inclut un ensemble de polices standard intégrées, mais vous pouvez appliquer n’importe quelle police Google ou toute autre police web au texte de 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é. Ce processus vous donne accès à toute la bibliothèque Google Fonts pour correspondre à votre marque ou à votre style de documentation.

NOTE

Vous pouvez également configurer des polices personnalisées autres que Google Fonts en utilisant le lien HTML d’intégration approprié et la déclaration CSS font-family de votre fournisseur de police.

Quand utiliser cela

Utilisez cette personnalisation lorsque vous souhaitez :

• Appliquez une police Google spécifique au texte de corps 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.
• Les trois étapes sont nécessaires pour que la police soit correctement affichée. Charger la police sans appliquer le CSS, ou appliquer le CSS sans charger la police, n’aura aucun effet visible.

Comment configurer une police de texte de corps personnalisée

É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 pour copier le code d’intégration, puis revenez à Document360.

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

5. Naviguez vers Connexions > Intégrations dans la barre de navigation de gauche du portail de la base de connaissances.

6. Accédez à la section 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 la base de connaissances dans la barre de navigation de gauche du portail de la base de connaissances.

10. Dans le panneau de navigation de gauche, allez jusqu’à la personnalisation du site > CSS personnalisé & JavaScript.

    

11. Depuis le panneau de navigation de gauche, sélectionnez l’onglet CSS .

12. Cliquez sur Ajouter des extraits de code en haut à droite de l’espace de code.

13. Sélectionnez l’option Modifier la police du texte du corps . Le modèle de code suivant apparaît :

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

14. Assurez-vous que le article sélecteur est inclus à côté de celui body dans l’extrait ; les deux sont nécessaires pour appliquer la police sur tout le contenu de l’article ainsi que sur la page plus large.
15. Remplacez font-family: "Source Sans Pro", sans-serif; par les règles CSS pour spécifier les familles du code d’intégration copié à l’étape 4.
16. Mettez à jour la color valeur avec la couleur de police que vous souhaitez.
17. Cliquez sur Enregistrer en haut à droite.

La police sélectionnée est désormais appliquée à votre base de connaissances. Visitez le site de la base de connaissances pour prévisualiser les changements.

Meilleures pratiques

• Terminez les trois étapes dans l’ordre. Le chargement de la police en HTML personnalisé la rend accessible au navigateur, mais il ne l’applique pas. Le CSS de l’étape 3 indique au navigateur où l’utiliser. Les deux étapes sont requises et doivent faire référence au même nom de police.
• Incluez les deux body et article les sélectionneurs. Le article sélecteur garantit que la police s’applique à l’intérieur du contenu de l’article, et pas seulement aux éléments de la page environnants. Sans cela, le texte du corps des articles ne changerait peut-être pas.
• Utilisez exactement la font-family valeur du code d’intégration. Google Fonts fournit la chaîne CSS font-family précise 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.
• Gardez la police de secours. Le sans-serif plan B font-family: "Your Font", sans-serif; garantit que les lecteurs voient une police lisible même si la police Google ne se charge pas. Incluez toujours un plan B générique.
• Chargez uniquement les poids de police dont vous avez besoin. Lorsque vous copiez le code d’intégration depuis Google Fonts, sélectionnez uniquement les poids spécifiques utilisés par votre documentation (par exemple, Normal 400 et Bold 700). Charger tous les poids disponibles augmente le temps de chargement de la page sans avantage.
• Testez dans votre base de connaissances en direct après avoir sauvegardé. Les changements de police s’appliquent à l’échelle du site. Ouvrez plusieurs types d’articles après avoir sauvegardé pour confirmer que la police se charge et s’affiche correctement.