SeedProd
SeedProd

Documentation SeedProd

Documentation, matériel de référence et tutoriels pour SeedProd

Comment utiliser des polices personnalisées avec SeedProd

SeedProd prend en charge les polices personnalisées via CSS3 @font-face méthode. Cela vous permet de charger n'importe quel fichier de police hébergé sur votre serveur et de l'appliquer aux éléments de texte de vos pages et modèles.

Étape 1 : Préparez vos fichiers de polices

Téléchargez la police de votre choix et convertissez-la en formats compatibles avec le Web. Pour vous assurer que votre police s'affiche correctement sur tous les navigateurs et appareils, générez les types de fichiers suivants à l'aide du générateur de polices Web FontSquirrel:

  • WOFF : Web Open Font Format, adapté aux pages web.
  • WOFF2 : une version améliorée du format WOFF offrant une meilleure compression.
  • TTF : police TrueType, largement prise en charge sur Mac et Windows.
  • SVG : format de police pour les graphiques vectoriels adaptables.
  • EOT : Embedded OpenType, utilisé pour assurer la compatibilité avec les pages Web.
  • OTF : format OpenType, pris en charge par la plupart des plateformes.

Étape 2 : Importez vos fichiers de polices dans WordPress

Téléchargez vos fichiers de polices sur votre serveur d'hébergement WordPress. Vous pouvez le faire via FTP, le gestionnaire de fichiers de votre panneau de contrôle d'hébergement ou un plugin de gestion de fichiers. Choisissez n'importe quel dossier au sein de votre /wp-content/ répertoire comme destination du téléchargement — par exemple, /wp-content/fonts/.

Notez l'URL complète de chaque fichier de police téléchargé. Vous aurez besoin de ces URL à l'étape suivante.

Étape 3 : Enregistrer la police dans le CSS global de SeedProd

Ouvrez l'éditeur SeedProd et rendez-vous à Paramètres globaux > CSS personnalisé. Ajouter un @font-face règle qui fait référence à vos fichiers de polices téléchargés. Remplacez YourFontName et remplacez les URL d'exemple par le nom de votre police et les chemins d'accès à vos fichiers.

Section « CSS personnalisé » des paramètres généraux dans l'éditeur SeedProd
@font-face {
  font-family: 'YourFontName';
  src: url('https://example.com/wp-content/fonts/YourFont.woff2') format('woff2'),
       url('https://example.com/wp-content/fonts/YourFont.woff') format('woff'),
       url('https://example.com/wp-content/fonts/YourFont.ttf') format('truetype'),
       url('https://example.com/wp-content/fonts/YourFont.otf') format('opentype'),
       url('https://example.com/wp-content/fonts/YourFont.svg') format('svg'),
       url('https://example.com/wp-content/fonts/YourFont.eot') format('embedded-opentype');
}

Étape 4 : Appliquer la police aux éléments

Une fois la police enregistrée, appliquez-la à n'importe quel élément de votre page en ajoutant une deuxième règle CSS dans la même section « CSS personnalisé ». L'exemple ci-dessous applique la police à toutes les balises d'en-tête — modifiez les sélecteurs pour cibler les éléments de votre choix.

h1, h2, h3 {
  font-family: 'YourFontName', sans-serif;
}
Police personnalisée appliquée aux titres dans SeedProd via le CSS global

Votre police personnalisée est désormais disponible sur toutes vos pages SeedProd. Vous pouvez utiliser des sélecteurs CSS supplémentaires pour appliquer cette police à des paragraphes, des boutons, des liens de navigation ou tout autre élément, afin d'assurer une typographie cohérente sur l'ensemble de votre site.

Articles connexes

Documentation SeedProd


  

    Recevez gratuitement des conseils et des ressources dans votre boîte aux lettres électronique, en même temps que plus de 60 000 autres personnes.
  

  

    

      

        

          
        

        

          
        

        

          
        

      

    

  

  

    Suivez-nous