Comment ajouter une typographie géniale dans WordPress avec Typekit

Vous êtes-vous déjà demandé comment les concepteurs parviennent à utiliser de belles polices web personnalisées sur leurs sites ? Souvent, ils ajoutent des polices personnalisées à WordPress en utilisant Typekit, un service Adobe qui vous donne accès à des polices de haute qualité. Dans cet article, nous vous montrerons comment ajouter des polices Typekit dans WordPress pour améliorer votre typographie.

Pourquoi utiliser les polices Typekit ?

Typekit est un service de polices par abonnement populaire qui peut vous faire économiser beaucoup d'argent. Au lieu de payer pour des licences de polices individuelles, qui peuvent coûter très cher, vous pouvez accéder à toute leur bibliothèque de centaines de polices gratuitement ou pour un tarif annuel fixe.

La bibliothèque Typekit est une collection massive de plus de 1 000 polices. Certaines des plus belles polices que vous pouvez trouver sur le web sont disponibles via Typekit, un service Adobe.

Leur plan gratuit de base donne accès à plus de 230 polices, et vous pouvez utiliser 2 familles de polices sur un site web gratuitement. D'autres plans commencent à 49,99 $ à 99,99 $ par an.

Ces superbes polices Typekit peuvent être facilement ajoutées à n'importe quel site web sans ralentir la vitesse de chargement de vos pages. Les polices sont servies par le CDN d'Adobe et se chargent beaucoup plus rapidement que si vous les hébergiez sur votre propre site.

Tutoriel vidéo Typekit pour WordPress

Si la vidéo ne vous plaît pas ou si vous avez besoin d'instructions supplémentaires, vous pouvez continuer à lire ci-dessous.

Pourquoi utiliser des polices web personnalisées sur WordPress ?

La typographie joue un rôle crucial dans la conception de votre site.

Choisir les bonnes polices communiquera clairement votre personnalité et votre message à vos lecteurs. Quelle que soit l'image que vous souhaitez projeter — professionnelle, amicale, décontractée, expérimentée — les polices de votre site web peuvent aider à projeter la bonne image.

En utilisant le bon ensemble de polices, vous pouvez laisser une impression durable. Au lieu de ressembler à tous les autres sites sur le web, votre texte a une apparence nettement différente. Choisir la bonne police pour votre site WordPress peut transformer votre site Web d'une conception simple en une œuvre d'art esthétique et magnifique.

Les bonnes polices Web personnalisées peuvent :

• augmenter les taux de conversion
• réduire le taux de rebond de votre site
• augmenter le temps passé sur votre site Web
• créer une expérience mémorable pour les utilisateurs

Prêt à commencer avec les polices Typekit ? Voici comment utiliser Typekit pour personnaliser votre conception WordPress.

Comment commencer avec Typekit

Tout d'abord, vous devrez créer un compte Typekit. Pour ce faire, visitez simplement Typekit.com pour comparer les plans disponibles.

Vous devrez choisir le plan auquel vous souhaitez vous inscrire. Le plan gratuit vous limite à un seul site Web et inclut l'accès à un nombre limité de polices. Vous voudrez peut-être commencer avec le plan gratuit pour l'essayer, puis passer à un niveau supérieur plus tard. La mise à niveau vous donne une plus grande bibliothèque de polices, et vous pouvez les utiliser sur plus de sites Web.

L'étape suivante consiste à créer un kit. Le kit vous permet de rassembler une bibliothèque spécifique de polices et de paramètres pour votre site Web, de sorte que Typekit ne charge que les fichiers et le code nécessaires. Pour créer votre kit, ajoutez le nom de votre site et le nom de domaine, puis cliquez sur Continuer.

Une fois que vous avez terminé de remplir vos informations pour votre kit, Typekit vous fournira un peu de code JavaScript à ajouter à votre site. Vous pouvez copier et coller ce code dans un éditeur de texte comme le Bloc-notes pour le sauvegarder pour l'instant. Nous l'ajouterons à votre site à l'étape suivante de ce tutoriel.

Pour l'instant, vous pouvez commencer à choisir vos polices. Vous pouvez parcourir la bibliothèque de polices et filtrer par options telles que la classification, le poids, la largeur, la hauteur x, et plus encore.

Lorsque vous voyez une police que vous aimez, vous pouvez cliquer dessus pour plus de détails et d'exemples. Si vous souhaitez l'ajouter à votre kit Web, cliquez sur le bouton Utilisation Web : Ajouter au kit sur le côté droit.

Cela ouvrira une fenêtre contextuelle où vous devrez ajouter la police sélectionnée au kit que vous venez de créer.

Vous pouvez maintenant cliquer sur le bouton Publier pour enregistrer les modifications apportées à votre kit.

C'est tout ! Votre kit de polices est maintenant prêt à être utilisé.

Ajout de vos polices Typekit dans WordPress

La manière la plus simple d'ajouter vos nouvelles polices web personnalisées à votre blog WordPress est d'utiliser un plugin WordPress Typekit.

Nous recommandons le plugin Typekit Fonts for WordPress. Après avoir installé et activé le plugin, vous pouvez visiter Paramètres » Polices Typekit pour configurer le plugin.

Tout d'abord, vous devrez coller le code JavaScript que vous avez enregistré précédemment dans le champ de code d'intégration Typekit. Après cela, vous pouvez ajouter des sélecteurs CSS pour spécifier où vous souhaitez utiliser la police sur votre site.

Dans la capture d'écran ci-dessus, nous avons ajouté la police au sélecteur CSS h1.site-title.

Votre thème WordPress peut utiliser différentes classes pour différents éléments. Vous devrez utiliser l'outil Inspecter l'élément dans votre navigateur web pour trouver ces classes CSS. Vous pourriez également consulter notre feuille de triche CSS générée par WordPress pour débutants afin de vous aider à démarrer.

C'est tout ! Nous espérons que cet article vous a aidé à apprendre comment ajouter une typographie géniale dans WordPress avec Typekit. Vous pourriez également consulter notre guide sur la façon d'ajouter des polices web Google dans vos thèmes WordPress.

Si cet article vous a plu, alors abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.