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éployez 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 (Police de titre) ou Body font (Police de corps)

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

  6. Cliquez sur Save changes

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

Ajouter des polices personnalisées via le Head Code

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

Le code d'en-tête (head code) personnalisé n'est pas disponible pendant la période d'essai. Passez à un forfait payant pour utiliser cette méthode.

Étape 1 : Trouver votre police et obtenir 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 voir 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' au 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 bien définis et la visibilité du texte est bonne grâce au contraste élevé. La barre latérale présente une navigation incluant 'Fonts', 'Noto', 'Icons', 'Knowledge' et 'FAQ'. Plus bas se trouvent les sections 'Preview' et 'Filter'. La section 'Preview' contient un champ de saisie 'Type something' et un sélecteur de taille à '40px'. La section 'Filter' inclut des catégories comme 'Language' et 'Feeling', avec des boutons interactifs tels que 'Business', 'Fancy' ou 'Playful'. La barre supérieure affiche la marque 'Google Fonts', un champ 'Search fonts' et une icône de sac à provisions. Une zone de défilement horizontale présente des cartes comme 'Readability' et 'Google Fonts API'. La zone principale indique '1899 of 1899 families' avec des icônes de vue en grille ou liste. Chaque entrée affiche le nom de la police (ex: 'Roboto') et un aperçu textuel.
L'image montre une page Web Google Fonts en mode sombre, présentant la police 'Roboto'. Le coin supérieur gauche contient une barre latérale avec 'Fonts', 'Noto', 'Icons', 'Knowledge' et 'FAQ'. La barre de navigation inclut le logo Google Fonts et une barre de recherche. Des onglets pour 'Specimen' (actif), 'Type tester', 'About', 'License' et 'Glyphs & languages' sont visibles. La section principale met en avant 'Roboto' en gras, conçu par Christian Robertson. Des tags décrivent la police : 'Sans Serif - Neo Grotesque', 'Technology - Variable', 'Feeling - Business', etc. Un bouton bleu 'Get font' est visible, surmonté d'une bulle d'information expliquant comment télécharger la police et obtenir son code d'intégration. Un échantillon de texte affiche : 'Whereas disregard and contempt for human rights have resulted'. Plus bas, une section 'Styles' est introduite.

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 affiche la page d'accueil d'Adobe Fonts, caractérisée par un design épuré et moderne avec un dégradé rouge et bleu dominant dans la section principale. La barre de navigation supérieure, sur fond blanc, présente le

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 compatibilité et des performances optimales. Hébergez les fichiers sur un CDN fiable ou votre propre serveur.

Étape 2 : Ajouter le code d'intégration au Head Code

  1. Déployez 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 des polices 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 : 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 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 modifications 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 l'enregistrement de la configuration :

  • 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 : 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 plusieurs appareils : Vérifiez que les polices s'affichent correctement sur les navigateurs de bureau et mobiles

  • Prévoyez des polices de secours : Spécifiez toujours des polices génériques de repli (ex: 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 ?