Catégories
Astuces et Design

Comment charger des polices Google ou Adobe dans WordPress – 1stWebDesigner

Comme vous le savez probablement déjà, lorsque vous obtenez un nouveau thème WordPress, il est livré avec quelques polices immédiatement. Ce sont les polices que le développeur a choisies qui correspondent le mieux à la conception et à la mise en page du thème. Cependant, vous pouvez toujours les changer si vous le souhaitez. Cela est particulièrement préférable si vous apportez déjà des modifications à d'autres aspects de la conception et des fonctionnalités du site. De cette façon, vous pouvez choisir les polices WordPress qui servent vraiment le mieux votre site, votre marque et votre public cible.

Et laissez-moi vous dire que les polices fantastiques ne manquent pas. Mais les installer réellement dans WordPress peut être un peu difficile, surtout si vous ne l'avez jamais fait auparavant. C’est précisément ce dont nous allons discuter ici aujourd’hui. Mais d'abord, arrêtons-nous brièvement pour parler où trouver les polices en premier lieu.

Des milliers de polices pour vos créations à partir de SEULEMENT 16,50 $ par mois

Polices VWeb

Polices Web

4300+ polices Web

Polices de script

Polices de script

5 700+ polices de script

Polices sans empattement

Polices sans empattement

2600+ Sans-Serif

TÉLÉCHARGER MAINTENANT

Envato Elements


Sélectionnez vos polices

Si vous souhaitez utiliser des polices en dehors des agrafes standard comme Arial et Helvetica, vous devrez les installer dans WordPress. Et avant cette, vous devrez les rechercher. Bien qu'il existe plus de ressources, voici une liste rapide des sites les plus populaires où vous pouvez obtenir des polices:

  • Google Fonts. Cette ressource gratuite propose près d'un millier de familles de polices parmi lesquelles choisir.
  • Polices Adobe. Anciennement appelé Typekit, les milliers de polices répertoriées ici sont toutes incluses dans un abonnement Creative Cloud.
  • Écureuil de police. Voici une autre excellente ressource remplie de polices gratuites. Ceux-ci ont été collectés sur d'autres sites Web.
  • Fonts.com. Un standard éprouvé dans les offres de polices. Vous pouvez trouver des options gratuites et premium ici.

Utilisez un plugin pour charger des polices Google ou Adobe dans WordPress

Passons maintenant à la partie de cet article pour laquelle vous êtes venu: le didacticiel. Votre première option pour charger des polices Google ou des polices Adobe dans WordPress consiste à utiliser un plugin. Ce sera probablement l'option la plus rapide et la plus simple pour la plupart des propriétaires de sites Web, c'est pourquoi nous la proposons en premier.

Polices personnalisées

Plugin WordPress pour polices personnalisées

Custom Fonts est un plugin WordPress qui facilite l'ajout de fichiers de polices personnalisés à WordPress. Il prend en charge les formats .woff, .woff2, .ttf, .svg, .otf et .eot. Et c'est facile à installer. Après l'installation, téléchargez simplement les polices que vous avez choisies et elles seront automatiquement ajoutées au générateur de pages que vous utilisez. Ce plugin fonctionne mieux avec Beaver Builder, Elementor et Astra.

Utiliser n'importe quelle police

Utiliser n'importe quel plugin WordPress pour polices

Une autre option de plugin est Use Any Font. Le plugin bien nommé ne nécessite aucun CSS à utiliser et vous permet d'ajouter des polices personnalisées de n'importe quelle source à WordPress. Vous ne tirerez pas d'un autre serveur ici, donc vos polices seront toujours disponibles pour être chargées à chaque fois.

Polices Google faciles

Plugin WordPress facile pour les polices Google

Notre troisième option ici est Easy Google Fonts. Comme vous l'avez peut-être deviné d'après son nom, ce plugin facilite l'installation de Google Fonts dans WordPress. Il s'intègre au personnalisateur WordPress intégré, donc une fois installé, vos polices seront automatiquement accessibles à partir de cet outil d'édition, en temps réel.

Ajouter manuellement des polices Google à WordPress

Si l'itinéraire du plug-in ne répond pas à vos besoins ou si vous avez simplement besoin d'un contrôle plus spécifique sur l'endroit où vos polices apparaîtront, vous pouvez les ajouter manuellement dans WordPress.

Pour commencer, vous devez accéder à Google Fonts et effectuer une sélection. Une fois que vous avez sélectionné un type / une famille de polices, cliquez sur la page de cette police spécifique.

Page Google Fonts

De là, vous pouvez choisir parmi une variété de styles. Vous pouvez les ajouter à votre famille de polices. Une fois que vous avez terminé ce processus de sélection, cliquez sur le Intégrer languette.

Un code d'intégration devrait maintenant être visible. Copiez ce code.

Code d'intégration de polices Google

Ensuite, connectez-vous à WordPress et collez ce code dans le section de votre thème choisi. Vous voudrez certainement faire une copie des fichiers de votre site avant de le faire et / ou de créer un thème enfant. Vous allez coller ce code dans le header.php fichier.

Vous pouvez également choisir de mettre vos nouvelles polices en file d'attente via le thème de votre thème. functions.php fichier.

Enregistrez vos modifications. Revenez ensuite à la page Google Fonts pour la police choisie. Juste en dessous du code d'intégration que vous avez copié précédemment; vous devriez voir un peu de CSS.

Règles CSS de Google Font

Copiez le CSS. Allez maintenant dans le Customizer dans WordPress (Apparence> Personnaliser) pour votre thème. Il devrait y avoir une place pour CSS supplémentaire. Collez ce morceau de code CSS pour appliquer votre police à l'échelle du site en l'attribuant à la body , ou simplement des éléments spécifiques comme les en-têtes ou la navigation. N'oubliez pas de cliquer Publier quand vous avez terminé.

Envato Elements

TÉLÉCHARGER MAINTENANT

Ajouter manuellement des polices Adobe (Typekit) à WordPress

Les polices Typekit sont désormais connues sous le nom de polices Adobe et vous pouvez les obtenir lorsque vous vous abonnez à Creative Cloud. Vous pouvez utiliser ces polices personnalisées comme vous le souhaitez, y compris sur votre site WordPress. Pour les ajouter manuellement, vous suivrez une procédure similaire à celle décrite pour les polices Google, mais décomposons-la en détail.

Tout d'abord, vous devez sélectionner la police que vous souhaitez utiliser. Une fois que vous en avez trouvé un, cliquez sur le bouton bascule à côté de celui-ci qui dit Activer la police.

Écran Adobe Fonts

À partir d'ici, vous devrez cliquer sur le lien qui indique < / >Ajouter au projet Web.

Écran Ajouter un projet Web

Donnez un nom à votre projet et basculez les différents styles et poids de police associés à la police choisie. Cliquez sur Créer un projet lorsque vous avez terminé d'apporter des modifications.

À partir de maintenant, le processus est identique à l'ajout de polices Google. Saisissez simplement le code intégré d'Adobe Fonts et collez-le dans le tag dans le site de votre site header.php fichier. Ajoutez l'extrait CSS au Customizer et vous serez prêt à partir.

Chargez correctement les polices Google ou Adobe dans WordPress

La personnalisation de la conception de votre site peut être une perspective intéressante. Cependant, il est essentiel que vous le fassiez correctement. Ne pas installer ou charger correctement les polices peut entraîner des temps de chargement du site plus lents et même des fonctionnalités médiocres. Pourquoi le laisser au hasard? Suivez les instructions proposées ici et préparez vos polices correctement.

Cet article peut contenir des liens affiliés. Voir notre divulgation sur les liens d'affiliation ici.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *