Comment changer les polices dans WordPress

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, définissent l'ambiance pour les visiteurs de votre site , et établissez l'identité de votre marque. Études ont également découvert que les polices affectent la capacité des lecteurs à apprendre, à rappeler des informations et à mémoriser des textes.

Si vous venez de installé un thème WordPress ou avoir une certaine expérience en CSS et en codage, nous vous montrerons plusieurs options que vous pouvez utiliser pour changer les polices dans WordPress.

Comment changer les polices dans WordPress

Trois options principales sont disponibles pour modifier les polices dans WordPress:

Utilisez des polices Web telles que Polices Google, Fonts.com ou Polices Web Adobe Edge, qui sont hébergés sur un site tiers

Codez les polices Web dans votre thème et mettez-les en file d'attente

Hébergez les polices sur votre site et ajoutez-les à votre thème

1. Comment changer les polices dans WordPress à l'aide de polices Web

L'utilisation de polices Web est un moyen plus simple et plus rapide de changer les polices dans WordPress que de télécharger et de télécharger des fichiers de polices.

Avec ceci 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 diffusées directement depuis les serveurs du fournisseur à l’aide d’un plugin ou en ajoutant du code à votre site.

In_content_1 all: [300x250] / dfp: [640x360]->

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

Vous pouvez ajouter des polices Web en utilisant un plugin WordPress ou manuellement en ajoutant quelques lignes de code à votre site. Explorons les deux options.

Comment ajouter des polices Web à l'aide d'un plugin WordPress

En fonction de la police Web que vous avez choisie, vous pouvez utiliser un WordPress plugin 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 plugin Typographie Polices Google.

Pour commencer, connectez-vous à votre tableau de bord d'administration WordPress et sélectionnez Plugins>Ajouter un nouveau.

Saisissez Google Fonts Typographydans le champ de recherche, puis sélectionnez Installer maintenant.

Sélectionnez Activer

Ensuite, accédez au Customizeren allant dans Apparence>Personnaliser.

Sélectionnez la section Google Fonts.

Ensuite, cliquez sur le lien pour ouvrir les paramètres des polices et configurez-les comme suit:

Sous Paramètres de base, définissez la police par défaut pour votre corps texte, en-têtes et boutons.

Sous Paramètres avancés, configurez le titre et la description de votre site ription, menu, titres et contenu, barre latérale et pied de page.

Décochez tous les poids de police indésirables dans la section Chargement de la policepour évitez de ralentir votre site.

Si certaines polices de votre site ne s'affichent pas ou ne fonctionnent pas correctement, utilisez la section Débogagepour dépanner.

Vous pouvez tester ces paramètres dans l'outil de personnalisation pour vous assurer qu'ils fonctionnent comme vous le souhaitez, puis sélectionnez Publier.

Remarque: Si vous oubliez de sélectionner publier dans l'outil de personnalisation, vous perdrez toutes les modifications que vous avez effectuées.

Comment ajouter des polices Web à l'aide du code

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 y a 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 des thèmes WordPress, créer 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.

Pour commencer, sélectionnez une police dans la bibliothèque Polices Google, et sélectionnez l'icône + (plus)pour l'ajouter à votre bibliothèque.

Ensuite, sélectionnez l'onglet en bas où vous trouverez le code à ajouter à votre site. Accédez à la section Intégrer la policesous l'onglet Intégrer. Vous trouverez le code généré par Google Fonts, qui ressemble à ceci:

Remarque: Nous avons choisi Work Sans pour ce guide afin que la police Le nom peut être différent du vôtre en fonction de ce que vous avez choisi.

Copiez cette partie du code: https://fonts.googleapis.com/css2?family = Travail + Sans

Cela vous permet de mettre en file d'attente le style des serveurs Google Fonts pour éviter les conflits avec les plugins tiers. Cela permet également de modifier plus facilement le thème enfant.

Pour mettre la police en file d'attente, ouvrez le fichier de fonctions et ajoutez le code suivant. (Remplacez le lien par le lien obtenu de Google Fonts):

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');

Vous pouvez ajoutez une nouvelle ligne à votre fonction ou à la même ligne si vous souhaitez ajouter plus de polices à l'avenir comme suit:

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_font s ');

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 faire fonctionner la police sur votre site.

Pour ce faire, ouvrez le fichier style.css de votre thème et ajoutez le code pour styliser les éléments individuels avec vos polices Web comme suit:

corps {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
font-family: '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.

Ayez une police de sauvegarde en place pour vous assurer que le les polices peuvent être rendues ou accessibles facilement, en particulier pour les utilisateurs disposant d'anciens appareils, de mauvaises connexions ou si le fournisseur de polices a des problèmes techniques. Pour ce faire, accédez à la feuille de style et modifiez le CSS comme suit:

body {
font-family: 'Work Sans ', Arial, sans-serif;
}

h1, h2, h3 {
police -family: '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. En cas de problème, ils verront les polices de sauvegarde, par exemple Arial ou Times New Roman dans notre cas.

2. Comment changer les polices dans WordPress en hébergeant des polices

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 d'extraire des ressources de sites tiers.

Google Fonts et d'autres polices Web vous permettent de télécharger des polices à utiliser comme polices hébergées localement, mais vous pouvez toujours télécharger d'autres polices sur votre ordinateur à condition que les licences le permettent à vous de le faire.

Pour commencer, téléchargez, décompressez, téléchargez le fichier de police sur votre site, puis liez-le dans votre feuille de style. Dans ce cas, vous n’avez pas à mettre les polices en file d’attente dans le fichier functions.php comme vous l’avez fait avec les polices Web. Vérifiez que les fichiers que vous importez sont au format .woff avant de les utiliser sur votre site Web.

Ensuite, passez à wp-content / themes / themenamepour télécharger le fichier de police dans votre thème.

Ouvrez la feuille de style et ajoutez le code suivant (dans ce cas, nous utilisons la police Work Sans mais vous pouvez la remplacer par vos propres polices):

@ font-face {
font-family: 'Work Sans';
src: url ("fonts / Work Sans-Medium.ttf") format ('woff'); / * medium * /
font-weight: normal;
font-style: normal;
}

@ font-face {
font-family: 'Work Sans';
src: url ( Format «fonts / Work Sans-Bold.ttf») ('woff'); / * medium * /
font-weight: bold;
font-style: normal;
}

@ font-face {
font-family: 'Cambria';
src: url (" fonts / Cambria.ttf ”) format ('woff'); / * moyen * /
font-weight: normal;
font-style: normal;
}

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.

Ensuite, ajoutez le style de vos éléments comme suit:

body {
font-family: 'Work Sans ', Arial, sans-serif;
src: url ("/ fonts / Work Sans-Medium.ttf");
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

Personnalisez votre typographie WordPress

Changer les polices dans WordPress est une excellente idée pour améliorer l'image de 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 été en mesure de personnaliser les polices de votre site en suivant les étapes en suivant les conseils de ce guide? Dites-le-nous dans les commentaires.

Articles Similaires: