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 à l'aide de la méthode CSS3 @font-face. 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éparer vos fichiers de polices

Téléchargez la police souhaitée et convertissez-la dans des 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 de WOFF avec une meilleure compression.
  • TTF : TrueType font, largement pris en charge sur Mac et Windows.
  • SVG : Format de police Scalable Vector Graphics.
  • EOT : Embedded OpenType, utilisé pour la compatibilité des pages Web.
  • OTF : Format OpenType, pris en charge sur la plupart des plateformes.

Étape 2 : Téléverser vos fichiers de polices sur WordPress

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

Notez le chemin d'URL complet de chaque fichier de police téléversé. 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 accédez à Paramètres globaux > CSS personnalisé. Ajoutez une règle @font-face qui référence vos fichiers de polices téléversés. Remplacez NomDeVotrePolice et les URL d'exemple par le nom de votre police et les chemins de fichiers réels.

Section CSS personnalisé des paramètres globaux 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 de titre — ajustez les sélecteurs pour cibler les éléments dont vous avez besoin.

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 maintenant disponible sur toutes vos pages SeedProd. Vous pouvez utiliser des sélecteurs CSS supplémentaires pour appliquer la police aux paragraphes, boutons, liens de navigation ou tout autre élément afin de maintenir la cohérence de votre typographie sur l'ensemble de votre site.

Articles associés

Documentation SeedProd


  
Recevez des conseils et des ressources gratuits directement dans votre boîte de réception, avec plus de 60 000 autres personnes

  

    

      

        

          
        

        

          
        

        

          
        

      

    

  

  

    Suivez-nous