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 Centre d'aide dans la barre latérale, puis cliquez sur Personnaliser

  2. Ouvrez le panneau Branding (Identité visuelle)

  3. Faites défiler jusqu'à la section Typographie

  4. Sélectionnez une famille de polices pour Police de titre ou Police de corps

  5. Cliquez sur Options avancées pour choisir des graisses spécifiques (de Fine à Noire)

  6. Cliquez sur Enregistrer les modifications

Le sélecteur de typographie ne prend en charge que Google Fonts. Pour Adobe Fonts, les polices personnalisées ou un contrôle accru sur le style, utilisez la méthode par Code d'en-tête ci-dessous.

Ajouter des polices personnalisées via le Code d'en-tête

Pour les polices non-Google ou la personnalisation avancée, injectez les codes d'intégration de polices directement 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 (Obtenir la police)

  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 principal présentant des aperçus de polices. Les éléments d'interface sont bien définis et la visibilité du texte est bonne grâce au contraste élevé entre le texte blanc et le fond sombre. La barre latérale gauche présente une navigation principale avec des icônes et des libellés 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'. La section 'Filter' inclut des catégories pour la langue et le style. Sous 'Feeling', on trouve des boutons interactifs pour filtrer les polices : 'Business', 'Fancy', 'Calm', 'Playful', etc. La barre supérieure affiche la marque 'Google Fonts' et un champ de recherche. La zone principale affiche '1899 of 1899 families'. Chaque entrée de police montre le nom de la police, ses informations d'axes variables et le concepteur.
L'image montre une page web Google Fonts en thème sombre, présentant la police 'Roboto'. Le coin supérieur gauche présente une barre latérale avec des icônes de navigation. La barre de navigation supérieure comprend le logo Google Fonts et une barre de recherche. Des onglets pour 'Specimen', 'Type tester', 'About', 'License' et 'Glyphs' sont visibles. La section principale met en évidence le nom de la police 'Roboto' en gras. 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 large échantillon de texte en Roboto est affiché, suivi d'une section intitulée 'Styles'.

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 en dégradé rouge et bleu dans la section héros. La barre de navigation supérieure, sur fond blanc, présente les options de navigation classiques.

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 polices sur un CDN fiable ou sur votre propre serveur.

Étape 2 : Ajoutez le code d'intégration au Code d'en-tête

  1. Développez Centre d'aide dans la barre latérale, puis cliquez sur Personnaliser

  2. Ouvrez le panneau Avancé

  3. Localisez l'éditeur Code d'en-tête personnalisé (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 Enregistrer les modifications

L'éditeur de code d'en-tête personnalisé dans le panneau Avancé où vous pouvez coller les codes d'intégration de polices et le CSS

L'éditeur de Code d'en-tête ne valide pas la syntaxe avant l'enregistrement. Testez soigneusement votre code pour éviter de briser 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 de Code d'en-tête personnalisé, 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 ligne 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 des familles de polices en CSS correspondent exactement (sensible à la casse)

Le sélecteur de typographie affiche "Impossible de charger les polices" :

  • Actualisez la page et réessayez

  • Utilisez la méthode du Code d'en-tête comme alternative

Échec de l'enregistrement de la configuration :

  • Vérifiez les erreurs de syntaxe dans votre Code d'en-tête

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

Bonnes pratiques

  • Limitez les graisses de police : Ne chargez que les graisses de police que vous utilisez réellement afin d'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 (fallback) : Spécifiez toujours des polices génériques de secours (par exemple, sans-serif, serif) dans vos déclarations font-family

Ressources complémentaires

Cela vous a-t-il ete utile ?