Changer la police par défaut sur votre site

[Discourse]

Ce guide explique comment changer la police par défaut sur votre site Discourse, soit pour des éléments spécifiques, soit en utilisant une bibliothèque de polices autre que Google Fonts.

Niveau d’utilisateur requis : Administrateur

Ce guide n’est nécessaire que si vous souhaitez intégrer une bibliothèque de polices autre que Google Fonts ou modifier la police de seulement certains éléments du site. Si vous utilisez Google Fonts et souhaitez modifier la police globalement sur votre site, essayez plutôt ce composant de thème : Google Fonts.

Ce guide couvrira :

• Utilisation des paramètres de police intégrés
• Modification de la police du site avec une police personnalisée
• Application de différentes polices à des éléments spécifiques

Paramètres de police intégrés

Discourse inclut un sélecteur de police intégré avec une sélection de polices groupées. C’est la manière la plus simple de changer la police de votre site sans aucun CSS personnalisé.

Accédez à Admin > Apparence > Polices pour accéder à la page des paramètres de police. À partir de là, vous pouvez définir :

• Police de base — utilisée pour la majorité du texte sur le site (par défaut : Inter)
• Police des titres — utilisée pour les titres (par défaut : Inter)
• Taille de texte par défaut — la taille de texte par défaut pour tous les utilisateurs

Ces paramètres utilisent les propriétés CSS personnalisées --font-family et --heading-font-family en arrière-plan, que les thèmes peuvent également remplacer.

Modification de la police avec une police personnalisée

Si vous souhaitez utiliser une police non incluse dans la liste intégrée (par exemple, depuis Google Fonts ou un fichier de police auto-hébergé), vous pouvez le faire via un composant de thème.

1. Créer un nouveau composant de thème

   Accédez à Admin > Apparence > Thèmes et Composants > Installer > Créer Nouveau. Choisissez un nom et sélectionnez « Composant ».

2. Modifier le CSS/HTML

   Cliquez sur le bouton « Modifier le CSS/HTML ».

   

3. Ajouter la police en utilisant Google Fonts

   Si vous souhaitez utiliser une police web de Google, ajoutez ce qui suit dans votre onglet Commun > CSS :

   @import url(https://fonts.googleapis.com/css?family=Oswald);
   
   html {
       --font-family: 'Oswald', sans-serif;
       --heading-font-family: 'Oswald', sans-serif;
   }
   

   Assurez-vous que la ligne @import url est placée en haut de la feuille de style.

   Dans cet exemple, Oswald est le nom de la police.

   S’il y a un problème avec la méthode @import url, vous pouvez utiliser la méthode <link> en insérant la ligne appropriée dans l’onglet Commun > /head de votre composant de thème :

   <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
   

   Cette méthode modifiera la police du site globalement.

4. Appliquer des polices à des éléments spécifiques
   Vous pouvez également changer la police du site uniquement pour certains éléments.

   Pour modifier la police de seulement certains éléments, tels que la barre de navigation ou les titres de sujets, ajoutez :

   @import url('https://fonts.googleapis.com/css?family=Oswald:200,300');
   
   .navigation-container, .link-top-line {
       font-family: 'Oswald', sans-serif;
   }
   

   

   Alternativement, pour modifier la police d’une catégorie spécifique, utilisez :

   body.category-CATEGORY-NAME {
       font-family: 'YOUR-NEW-FONT';
   }
   

5. Ajouter le nouveau composant aux thèmes principaux

   Assurez-vous d’ajouter le composant de thème nouvellement créé à tous les thèmes principaux que les utilisateurs peuvent sélectionner :