Ferndesk
Personnalisation

Ajouter des polices personnalisées à votre centre d’aide

Personnalisez la typographie de votre centre d’aide pour l’adapter aux directives de votre marque en ajoutant des polices personnalisées provenant de Google Fonts ou de sources auto-hébergées.

Utiliser le sélecteur de typographie (Google Fonts uniquement)

Pour accéder rapidement à Google Fonts, utilisez le sélecteur de typographie intégré :

  1. Développez Help Center dans la barre latérale, puis cliquez sur Customize

  2. Ouvrez le panneau Branding

  3. Faites défiler jusqu’à la section Typography

  4. Sélectionnez une famille de polices pour Heading font ou Body font

  5. Cliquez sur Advanced Options pour choisir des graisses de police spécifiques (de Thin à Black)

  6. Cliquez sur Save changes

Le sélecteur de typographie prend uniquement en charge Google Fonts. Pour Adobe Fonts, les polices personnalisées ou un contrôle accru du style, utilisez la méthode Head Code ci-dessous.

Ajouter des polices personnalisées via Head Code

Pour les polices qui ne proviennent pas de Google ou pour une personnalisation avancée, injectez directement les codes d’intégration des polices dans votre centre d’aide :

Le code d’en-tête personnalisé n’est pas disponible pendant la période d’essai. Passez à une formule payante pour utiliser cette méthode.

Étape 1 : trouver votre police et obtenir le code d’intégration

Google Fonts :

  1. Consultez Google Fonts

  2. Parcourez les polices ou recherchez celle que vous souhaitez utiliser

  3. Cliquez sur le nom de la police pour afficher sa page de détails

  4. Cliquez sur le bouton Get font

  5. Copiez le code d’intégration <link> fourni

L’image présente une interface sombre de « Google Fonts », divisée en trois sections principales : une barre latérale gauche, une barre de navigation et de recherche en haut avec des options de filtrage supplémentaires, ainsi que la zone de contenu principale affichant des aperçus de polices. Les éléments de l’interface sont généralement bien définis et le texte est lisible grâce au contraste élevé entre le texte blanc et l’arrière-plan sombre. La barre latérale gauche contient une navigation principale avec des icônes et des libellés tels que « Fonts », « Noto », « Icons », « Knowledge » et « FAQ ». En dessous se trouvent les sections « Preview » et « Filter ». La section « Preview » comprend un champ de saisie intitulé « Type something » et un sélecteur de taille de police actuellement réglé sur « 40px », accompagné d’un curseur. La section « Filter » comprend des catégories dépliables pour « Language », « Writing system » et « Feeling ». Sous « Feeling », plusieurs boutons interactifs permettent de filtrer les styles de police, notamment « Business », « Fancy », « Calm », « Playful », « Cute », « Artistic », « Vintage » et « Loud ». Tout en bas à gauche, des icônes de soleil et de lune indiquent probablement un bouton permettant de basculer entre les modes clair et sombre. La barre supérieure affiche clairement la marque « Google Fonts » à gauche, un champ « Search fonts » avec une icône de loupe au centre, un menu déroulant « Sort by Trending » et une icône de sac de courses à droite. Sous la barre de recherche, un bouton bleu « X Filters » est visible, indiquant qu’un filtre est actif. À droite du champ de recherche et sous le bouton « X Filters », une section à défilement horizontal présente des cartes contenant des informations telles que « Readability », « Material design guidelines », « Optimize font loading » et « Google Fonts API ». Une flèche vers la droite indique que d’autres cartes sont disponibles. La zone de contenu principale indique « 1899 of 1899 families » et « About these results », avec des icônes permettant de choisir entre l’affichage en grille et en liste. La fonction principale de la page est d’afficher différentes familles de polices. Chaque entrée de police affiche le nom de la police (par exemple « Roboto », « Noto Sans Syriac », « Playwrite Česko »), les informations sur ses axes variables ainsi que le concepteur ou la fonderie. Sous les métadonnées de chaque police figure un aperçu d’un texte d’exemple,
L’image présente une page web Google Fonts au thème sombre, affichant la police « Roboto ». Dans l’angle supérieur gauche se trouve une barre latérale avec des icônes de navigation et des libellés tels que « Fonts », « Noto », « Icons », « Knowledge » et « FAQ ». En dessous se trouve une icône de soleil, probablement utilisée pour basculer entre les modes clair et sombre. La barre de navigation supérieure comprend le logo Google Fonts, une barre de recherche intitulée « Search fonts » et une icône de sac de courses à l’extrémité droite. Juste sous la navigation supérieure se trouvent des onglets pour « Specimen » (actuellement actif), « Type tester », « About », « License » et « Glyphs & languages ». La section principale met en évidence le nom de la police « Roboto » dans une grande police en gras. Sous le nom de la police figure la mention « Designed by Christian Robertson, Paratype, Font Bureau », ces noms étant des liens cliquables. Une rangée d’étiquettes grises semblables à des boutons décrit les caractéristiques de la police : « Sans Serif - Neo Grotesque », « Technology - Variable », « Feeling - Business », « Feeling - Competent », « Feeling - Calm » et « Feeling - Stiff ». À droite du nom de la police, un bouton bleu intitulé « Get font » est visible. Une bulle d’information bleu clair le recouvre partiellement et explique : « Click here to download this font, get its embed code, and find out how to use it in apps and products. » Le lien « Got it » est cliquable dans cette bulle. Un grand échantillon de texte en police Roboto affiche : « Whereas disregard and contempt for human rights have resulted ». En dessous, des options permettent de « Select preview text: », avec un menu déroulant « Writing system » et un autre pour « Language ». Plus bas, une section intitulée « Styles » apparaît dans une grande police. Tout en bas se trouve un champ de saisie, probablement destiné à permettre aux utilisateurs de saisir leur propre texte d’aperçu.

Exemple avec Adobe Fonts :

  1. Consultez Adobe Fonts et connectez-vous

  2. Parcourez les polices et ajoutez-les à un projet web

  3. Dans les paramètres de votre projet web, copiez le code d’intégration <link>

La capture d’écran présente la page d’accueil d’Adobe Fonts, caractérisée par un design épuré et moderne, avec un arrière-plan en dégradé rouge et bleu dominant dans la section principale. La barre de navigation supérieure, sur fond blanc, présente la

Polices auto-hébergées :

Créez une règle @font-face faisant référence à vos fichiers de police :

<style>
@font-face {
  font-family: 'CustomFont';
  src: url('https://yoursite.com/fonts/customfont.woff2') format('woff2'),
       url('https://yoursite.com/fonts/customfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
</style>

Utilisez les formats WOFF2 et WOFF pour une compatibilité et des performances optimales dans les navigateurs. Hébergez les fichiers de police sur un CDN fiable ou sur votre propre serveur.

Étape 2 : ajouter le code d’intégration à Head Code

  1. Développez Help Center dans la barre latérale, puis cliquez sur Customize

  2. Dans le groupe Advanced, cliquez sur Custom Code

  3. Repérez l’éditeur Custom head code

  4. Collez le code d’intégration de votre police (la balise <link> ou le bloc <style> de l’étape 1)

  5. Cliquez sur Save changes

L’éditeur Custom head code du groupe Advanced, dans lequel vous pouvez coller des codes d’intégration de polices et du CSS

L’éditeur Head Code ne valide pas la syntaxe avant l’enregistrement. Testez soigneusement votre code pour éviter de dégrader le style de votre centre d’aide.

Étape 3 : appliquer la police via CSS

Après avoir intégré la police, ajoutez des règles CSS pour l’appliquer à des éléments spécifiques :

<style>
/* Apply custom font to all headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Your Font Name', sans-serif;
}

/* Apply custom font to body text */
body, p {
  font-family: 'Your Font Name', serif;
}
</style>

Ajoutez ce CSS au même éditeur Custom head code, soit dans le même bloc <style> que votre déclaration @font-face, soit dans un bloc distinct.

Les modifications prennent effet immédiatement après l’enregistrement. Consultez votre centre d’aide en ligne pour vérifier que les polices s’affichent correctement.

Dépannage

Les polices ne se chargent pas :

  • Vérifiez que la syntaxe du code d’intégration est correcte (aucun guillemet ni crochet manquant)

  • Vérifiez que les URL des polices sont accessibles publiquement (avec CORS activé pour les polices auto-hébergées)

  • Vérifiez que les noms de familles de polices dans le CSS correspondent exactement (en respectant la casse)

Le sélecteur de typographie affiche « Unable to load fonts » :

  • Actualisez la page et réessayez

  • Utilisez la méthode Head Code comme solution alternative

Échec de l’enregistrement de la configuration :

  • Vérifiez la présence d’erreurs de syntaxe dans votre Head Code

  • Supprimez le code ajouté récemment, puis essayez à nouveau d’enregistrer afin d’isoler le problème

Bonnes pratiques

  • Limiter les graisses de police : chargez uniquement les graisses que vous utilisez réellement afin d’améliorer la vitesse de chargement des pages

  • Utiliser font-display : ajoutez font-display: swap; pour éviter l’affichage de texte invisible pendant le chargement de la police

  • Tester sur différents appareils : vérifiez que les polices s’affichent correctement sur les navigateurs de bureau et mobiles

  • Prévoir des polices de remplacement : indiquez toujours des polices de remplacement génériques (par exemple sans-serif, serif) dans vos déclarations font-family

Ressources supplémentaires

Cela vous a-t-il été utile ?
Cela vous a-t-il été utile ?