Ferndesk
Personnalisation

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

Personnalisez la typographie de votre centre d'aide pour qu'elle corresponde à votre charte graphique en ajoutant des polices personnalisées depuis Google Fonts ou des sources auto-hébergées.

Utilisation du sélecteur de typographie (Google Fonts uniquement)

Pour un accès rapide à 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 ne prend en charge que Google Fonts. Pour Adobe Fonts, les polices personnalisées ou un contrôle plus précis du style, utilisez la méthode par Head Code ci-dessous.

Ajout de polices personnalisées via le Head Code

Pour les polices autres que Google ou une personnalisation avancée, injectez directement les codes d'intégration de police dans votre centre d'aide :

Étape 1 : Trouvez votre police et obtenez le code d'intégration

Google Fonts :

  1. Visitez Google Fonts

  2. Parcourez ou recherchez la police souhaitée

  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 affiche une interface 'Google Fonts' en thème sombre, divisée en trois sections principales : une barre latérale gauche, une barre de navigation/recherche supérieure avec des options de filtrage supplémentaires, et la zone de contenu principale présentant des aperçus de polices. Les éléments de l'interface utilisateur sont généralement bien définis et la visibilité du texte est bonne grâce au contraste élevé entre le texte blanc et l'arrière-plan sombre. La barre latérale gauche présente une navigation principale avec des icônes et des étiquettes de texte comprenant 'Fonts', 'Noto', 'Icons', 'Knowledge' et 'FAQ'. En dessous se trouvent les sections 'Preview' et 'Filter'. La section 'Preview' contient un champ de saisie de texte intitulé 'Type something' et un sélecteur de taille de police, actuellement réglé sur '40px', avec un curseur d'accompagnement. La section 'Filter' comprend des catégories repliables pour 'Language', 'Writing system' et 'Feeling'. Sous 'Feeling', on trouve divers boutons interactifs pour filtrer les styles de polices tels que 'Business', 'Fancy', 'Calm', 'Playful', 'Cute', 'Artistic', 'Vintage' et 'Loud'. Tout en bas à gauche, il y a une iconographie soleil/lune, indiquant probablement un bouton de mode clair/sombre. La barre supérieure affiche clairement la marque 'Google Fonts' sur la gauche, un champ de recherche 'Search fonts' avec une icône de loupe au centre, un menu déroulant 'Sort by Trending' et une icône de panier à l'extrême droite. Sous la barre de recherche, un bouton bleu 'X Filters' est visible, indiquant un filtre actif. À droite du champ de recherche et sous le bouton 'X Filters', une section à défilement horizontal présente des cartes avec des informations telles que 'Readability', 'Material design guidelines', 'Optimize font loading' et 'Google Fonts API'. Une icône de flèche droite suggère que d'autres cartes sont disponibles. La zone de contenu principale indique '1899 of 1899 families' et 'About these results' avec des icônes de vue en grille et en liste. La fonction principale de la page est d'afficher diverses familles de polices. Chaque entrée de police montre le nom de la police (ex: 'Roboto', 'Noto Sans Syriac', 'Playwrite Česko'), ses informations d'axe variable et le designer/fonderie. Sous les métadonnées de chaque police, un aperçu d'un texte d'exemple est visible.
L'image affiche une page Web Google Fonts sur un thème sombre, mettant en avant la police 'Roboto'. Le coin supérieur gauche présente une barre latérale avec des icônes de navigation et des étiquettes textuelles telles que 'Fonts', 'Noto', 'Icons', 'Knowledge' et 'FAQ'. En dessous, une icône de soleil est présente, probablement pour basculer entre le mode 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 panier à l'extrême droite. Bien en vue sous la navigation supérieure se trouvent les onglets 'Specimen' (actuellement actif), 'Type tester', 'About', 'License' et 'Glyphs & languages'. La section principale met en évidence le nom de la police 'Roboto' dans une police large et grasse. Sous le nom de la police, il est indiqué 'Designed by Christian Robertson, Paratype, Font Bureau', ces noms servant de liens cliquables. Une rangée de balises grises ressemblant à 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 nommé 'Get font' est visible. Superposée à ce bouton, une bulle d'information bleu clair explique : 'Cliquez ici pour télécharger cette police, obtenir son code d'intégration et découvrir comment l'utiliser dans des applications et produits.' Dans cette bulle, 'Got it' est un lien cliquable. Un large échantillon de texte dans la police Roboto indique : 'Whereas disregard and contempt for human rights have resulted'. En dessous se trouvent des options pour 'Select preview text :' avec un menu déroulant pour 'Writing system' et un autre pour 'Language'. Plus bas, une section intitulée 'Styles' est introduite en gros caractères. Tout en bas, un champ de saisie de texte est présent, probablement pour que les utilisateurs puissent taper leur propre texte d'aperçu.

Exemple Adobe Fonts :

  1. Visitez 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 montre la page d'accueil d'Adobe Fonts, caractérisée par un design propre et moderne avec un arrière-plan dégradé rouge et bleu dominant dans la section héros. La barre de navigation supérieure, sur fond blanc, présente les éléments suivants :

Polices auto-hébergées :

Créez une règle @font-face référençant 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 meilleure compatibilité des navigateurs et de meilleures performances. Hébergez les fichiers de police sur un CDN fiable ou votre propre serveur.

Étape 2 : Ajoutez le code d'intégration dans le Head Code

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

  2. Ouvrez le panneau Advanced

  3. Localisez l'éditeur Custom head code

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

  5. Cliquez sur Save changes

L'éditeur Custom head code dans le panneau Advanced où vous pouvez coller les codes d'intégration de police et le CSS

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

Étape 3 : Appliquez 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 dans le même éditeur Custom head code, soit dans le même bloc <style> que votre déclaration @font-face, soit dans un bloc séparé.

Les changements prennent effet immédiatement après l'enregistrement. Visitez votre centre d'aide en direct pour confirmer 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 (pas de guillemets ou de crochets manquants)

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

  • Assurez-vous que les noms de famille de polices dans le CSS correspondent exactement (sensible à 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 alternative

Échec de la configuration d'enregistrement :

  • Vérifiez les erreurs de syntaxe dans votre Head Code

  • Supprimez le code récemment ajouté et réessayez d'enregistrer pour isoler le problème

Bonnes pratiques

  • Limitez les graisses de police : Ne chargez que les graisses de police que vous utilisez réellement pour améliorer la vitesse de chargement de la page

  • Utilisez font-display : Ajoutez font-display: swap; pour éviter le texte invisible pendant le chargement de la police

  • Testez sur tous les appareils : Vérifiez que les polices s'affichent correctement sur les navigateurs de bureau et mobiles

  • Fournissez des polices de secours : Spécifiez toujours des polices génériques de secours (ex: sans-serif, serif) dans vos déclarations font-family

Ressources complémentaires

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