Comment ajouter une typographie géniale dans WordPress avec Typekit

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

Pourquoi utiliser les polices Typekit?

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

La bibliothèque Typekit est une vaste collection de plus de 1 000 polices. Typekit, un service Adobe, propose certaines des plus belles polices disponibles sur le Web..

Leur forfait gratuit comprend l'accès à plus de 230 polices et vous pouvez utiliser 2 familles de polices sur un seul et même site Web. Les autres plans commencent de 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 à partir du 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 vous n'aimez pas la vidéo ou si vous avez besoin de plus d'instructions, 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. Peu importe le type d'image que vous voulez représenter (professionnelle, conviviale, occasionnelle, expérimentée), les polices de votre site Web peuvent vous aider à projeter la bonne image..

En utilisant le bon jeu de polices, vous pouvez laisser une impression durable. Au lieu de ressembler à tous les autres sites du Web, votre texte est sensiblement différent. La sélection de la police appropriée pour votre site WordPress peut faire passer votre site Web d'une conception simple à une œuvre d'art époustouflante et époustouflante..

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 à utiliser les polices Typekit? Voici comment utiliser Typekit pour personnaliser votre conception WordPress.

Comment débuter avec Typekit

Vous devez d’abord créer un compte Typekit. Pour ce faire, il suffit de visiter Typekit.com pour comparer les plans disponibles.

Vous devrez choisir le plan auquel vous souhaitez vous inscrire. Le plan gratuit vous limite à un site Web et inclut un accès à des polices limitées. Vous voudrez peut-être commencer à utiliser le plan gratuit pour l'essayer, puis effectuer la mise à niveau ultérieurement. La mise à niveau vous donne une plus grande bibliothèque de polices que vous pouvez utiliser sur plusieurs sites Web..

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

Une fois que vous avez fini de renseigner vos informations pour votre kit, Typekit vous donnera un peu de code JavaScript à ajouter à votre site. Vous pouvez copier et coller ce code dans un éditeur de texte tel que Notepad pour le sauvegarder pour le moment. Nous l'ajouterons à votre site à la prochaine étape de ce tutoriel..

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

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 bouton sur le côté droit.

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

Maintenant, vous pouvez cliquer sur le Publier bouton pour enregistrer les modifications dans votre kit.

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

Ajout de vos polices Typekit dans WordPress

Le moyen le plus simple d’ajouter vos nouvelles polices Web personnalisées à votre blog WordPress consiste à 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 configurer le plugin.

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

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

Votre thème WordPress peut utiliser différentes classes pour différents éléments. Vous devez utiliser l'outil Inspecter l'élément de votre navigateur Web pour connaître ces classes CSS. Vous voudrez peut-être aussi consulter notre aide-mémoire CSS pour les débutants généré par WordPress afin de vous aider à démarrer.

C'est tout! Nous espérons que cet article vous a aidé à apprendre à ajouter une typographie géniale dans WordPress avec Typekit. Vous pouvez également consulter notre guide sur l’ajout de polices Web Google dans vos thèmes WordPress..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.