Un excellent moyen d’ajouter de la marque et de l’individualisme à votre site WordPress est de changer les polices de votre thème.
La typographie et d’autres éléments de banding créent une bonne première impression, créent une ambiance pour les visiteurs de votre site et établissent l’identité de votre marque. Études ont également constaté que les polices affectent la capacité des lecteurs à apprendre, à se souvenir des informations et à mémoriser des textes.
Si vous venez d’installer un thème WordPress ou avez une certaine expérience en CSS et en codage, nous vous montrerons plusieurs options que vous pouvez utiliser pour changer les polices dans WordPress.
Il existe trois options principales disponibles pour changer les polices dans WordPress:
L’utilisation de polices Web est un moyen plus simple et plus rapide de modifier les polices dans WordPress que de télécharger et de télécharger des fichiers de polices.
Avec cette option, vous pouvez accéder à une variété de polices sans les mettre à jour chaque fois qu’il y a un changement, et cela ne monopolise pas l’espace serveur sur votre hébergement. Les polices sont servies directement depuis les serveurs du fournisseur à l’aide d’un plugin ou en ajoutant du code à votre site.
Assurez-vous que les polices Web que vous choisissez pour votre site correspondent à l’identité de votre marque, sont faciles à lire pour le corps du texte, sont familières aux visiteurs du site Web et véhiculent le type d’humeur et d’image que vous souhaitez.
Vous pouvez ajouter des polices Web à l’aide d’un plugin WordPress ou manuellement en ajoutant quelques lignes de code à votre site. Explorons les deux options.
En fonction de la police Web que vous avez choisie, vous pouvez utiliser un plugin WordPress pour accéder à la bibliothèque de polices et choisir celle que vous souhaitez sur votre site. Pour ce guide, nous avons choisi Google Fonts et utilisé le Typographie Google Fonts brancher.
S’il y a des polices sur votre site qui ne s’affichent pas ou ne fonctionnent pas correctement, utilisez le Débogage section pour dépanner.
Remarque: Si vous oubliez de sélectionner publier dans le Customizer, vous perdrez toutes les modifications que vous avez apportées.
Vous pouvez installer et utiliser des polices Web si vous avez accès au code de votre thème. Il s’agit d’une alternative manuelle à l’ajout d’un plugin supplémentaire, mais ce n’est pas compliqué si vous suivez attentivement les étapes.
Cependant, il existe différentes étapes à suivre si vous utilisez un thème du répertoire de thèmes WordPress ou un thème personnalisé.
Si vous avez acheté un thème dans le répertoire de thèmes WordPress, créez un thème enfant, puis donnez-lui le fichier style.css et functions.php. C’est plus facile si vous avez un thème personnalisé car vous pouvez modifier la feuille de style et le fichier de fonctions à partir de votre thème.
Remarque: Nous avons choisi Work Sans pour ce guide, le nom de la police peut donc être différent du vôtre en fonction de ce que vous avez choisi.
Cela vous permet de mettre en file d’attente le style des serveurs Google Fonts pour éviter les conflits avec les plugins tiers. Il permet également de modifier plus facilement le thème enfant.
function wosib_add_google_fonts () {
wp_register_style (‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);
wp_enqueue_style (‘googleFonts’);
}
add_action (‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’);
function mybh_add_google_fonts () {
wp_register_style (‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);
wp_enqueue_style (‘googleFonts’);
}
add_action (‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’);
Dans ce cas, nous avons mis en file d’attente les polices Cambria et Work Sans.
L’étape suivante consiste à ajouter les polices à la feuille de style de votre thème pour que la police fonctionne sur votre site.
corps {
font-family: ‘Work Sans’, sans-serif;
}
h1, h2, h3 {
famille de polices: ‘Cambria’, serif;
}
Dans ce cas, la police principale sera Work Sans tandis que les éléments d’en-tête comme h1, h2 et h3 utiliseront Cambria.
Une fois terminé, enregistrez la feuille de style et vérifiez si vos polices fonctionnent comme elles le devraient. Sinon, vérifiez que les polices ne sont pas remplacées dans la feuille de style, ou effacez le cache de votre navigateur et réessayez.
corps {
famille de polices: ‘Work Sans’, Arial, sans-serif;
}
h1, h2, h3 {
famille de polices: ‘Cambria’, Times New Roman, serif;
}
Si tout va bien, les visiteurs de votre site verront vos polices Web par défaut, dans notre cas Work Sans et Cambria. S’il y a des problèmes, ils verront les polices de sauvegarde, par exemple Arial ou Times New Roman dans notre cas.
L’hébergement des polices sur vos propres serveurs vous aide à optimiser les performances de vos polices Web, mais c’est aussi un moyen plus sûr de le faire au lieu de tirer des ressources de sites tiers.
Les polices Google et d’autres polices Web vous permettent de télécharger des polices à utiliser en tant que polices hébergées localement, mais vous pouvez toujours télécharger d’autres polices sur votre ordinateur à condition que les licences vous permettent de le faire.
@ font-face {
font-family: ‘Work Sans’;
src: url (“fonts / Work Sans-Medium.ttf”) format (‘woff’); /* moyen */
poids de la police: normal;
style de police: normal;
}
@ font-face {
font-family: ‘Work Sans’;
src: url (“fonts / Work Sans-Bold.ttf”) format (“woff”); /* moyen */
poids de la police: gras;
style de police: normal;
}
@ font-face {
famille de polices: ‘Cambria’;
Remarque: L’utilisation de @fontface vous permet d’utiliser le gras, l’italique et d’autres variantes de votre police, après quoi vous pouvez spécifier l’épaisseur ou le style de chaque police.
corps {
famille de polices: ‘Work Sans’, Arial, sans-serif;
src: url (“/ fonts / Work Sans-Medium.ttf”);
}
h1, h2, h3 {
famille de polices: ‘Cambria’, Times New Roman, serif;
}
Changer les polices dans WordPress est une excellente idée pour améliorer la marque et l’expérience utilisateur. Ce n’est pas une tâche simple, mais vous aurez plus de contrôle sur votre thème.
Avez-vous pu personnaliser les polices de votre site en suivant les étapes à l’aide des conseils de ce guide? Dites le nous dans les commentaires.