jeudi 27 Fév .20

Comment personnaliser les polices de caractère sous WordPress ?

polices personnalisées wordpress

Choisir la bonne police pour votre site WordPress est un élément central de la conception Web et de l’image de marque de votre site. Tout comme les couleurs, les images et d’autres éléments, la typographie joue un rôle majeur dans la façon dont votre site est perçu par les visiteurs. Heureusement, les polices WordPress sont l’une des nombreuses choses que vous pouvez personnaliser librement. Vous pouvez utiliser à peu près n’importe quelle police personnalisée gratuite sur votre site WordPress. Voyons comment faire étape par étape.

Pourquoi utiliser des polices personnalisées sur votre site WordPress ?

La typographie est une véritable science en soi et nous ne pourrons pas vous donner ici un cours complet sur l’utilisation des polices dans la conception de sites Web. Après tout, il ne s’agit pas seulement de la police, mais aussi de sa taille, de son inclinaison, de son épaisseur et de bien d’autres choses. Cependant, nous pouvons expliquer pourquoi l’utilisation de polices personnalisées sur votre site WordPress est une bonne idée.

La typographie fait partie de la première impression

Tout d’abord, la police que vous utilisez influence beaucoup la perception de votre site. Votre site est-il amusant et ludique ? Êtes-vous un professionnel digne de confiance ? Les visiteurs décident souvent en un seul coup d’œil de la suite à donner à leur visite, et votre typographie joue un grand rôle dans leur décision.

Les polices ont beaucoup plus d’influence que vous ne le pensez

Elles peuvent affecter votre capacité à apprendre, à mémoriser des textes et même modifier votre humeur. Par exemple, selon une étude, il a été noté que si vous souhaitez augmenter le temps passé à lire du texte, vous devez utiliser une police serif. Cependant, si vous souhaitez en savoir plus dans un court laps de temps, vous devez passer à une police sans-serif. Une autre étude a montré aux gens les mêmes consignes d’un exercice dans différentes polices. Ils ont ensuite demandé aux participants d’estimer le temps qu’il leur faudrait pour suivre lesdites instructions. Ceux avec la police la plus complexe ont deviné que cela leur prendrait plus de temps que le groupe avec la police la plus simple.

Comment ajouter manuellement des polices personnalisées à WordPress ?

Lorsqu’il s’agit d’ajouter manuellement des polices personnalisées à WordPress, vous disposez de trois options principales : HTML, JavaScript et CSS. Il y a des avantages et des inconvénients à chaque méthode et celle qui est la bonne pour vous dépend de votre configuration. Ne vous inquiétez pas, nous allons les détailler en détail.

Utiliser CSS et @import

Commençons par la méthode la moins recommandée. Si vous prévoyez d’installer des polices de caractères personnalisées à partir de Google Fonts, vous avez peut-être remarqué qu’il a un onglet intitulé @import. Le service vous donne un morceau de code CSS.

Vous pouvez le prendre tel quel et l’insérer dans votre en-tête ou le copier sans les crochets <script> au début du fichier style.css de votre thème (ou mieux encore, dans votre thème enfant).

Cela chargera la police dans votre site à partir de la feuille de style. Cela semble être une solution simple, n’est-ce pas ? Pourquoi est-elle alors la moins recommandée ? La raison en est les problèmes de performances. L’utilisation de @import n’est plus la solution recommandée, car elle empêche les navigateurs de télécharger plusieurs feuilles de style à la fois. La conséquence : des temps de chargement des pages plus lents.

Utilisation d’un fichier de modèle WordPress

Une deuxième méthode pour obtenir les polices sur votre site est de prendre le code fourni par les bibliothèques de polices et de les copier dans votre fichier header.php. La plupart des thèmes WordPress standard l’ont.  Assurez-vous de le placer quelque part entre les crochets <head> et </head>. De cette façon, votre police se chargera chaque fois qu’une page est chargée.

Si vous utilisez un thème enfant, veillez à copier le fichier header.php du thème parent dans le répertoire du thème enfant et à y apporter les modifications. Certains thèmes sont livrés avec des paramètres vous permettant d’ajouter du code personnalisé à votre en-tête et pied de page via le backend. C’est également une option viable.

Utilisation de @ font-face

Jusqu’à présent, nous n’avons parlé que de l’utilisation de polices personnalisées dans WordPress qui sont hébergées ailleurs, à savoir les serveurs de Google et d’Adobe. Cependant, il est également possible d’héberger des polices sur votre propre site et de les proposer à vos visiteurs.

Pour ce faire, vous devez d’abord télécharger la police en question. Lorsque cela est fait, assurez-vous de l’obtenir dans un format de police Web. Cela signifie TTF, OTF ou WOFF. Une fois que vos fichiers de polices sont prêts, vous devez les télécharger sur votre site WordPress via votre FTP. Un bon endroit pour les stocker est dans un sous-répertoire de votre thème enfant nommé polices. Après cela, vous devez charger la police dans votre feuille de style via @ font-face. Voici à quoi ça ressemble :

polices de caractères avec wordpress

N’oubliez pas de remplacer le nom de la police et l’adresse de son emplacement sur votre propre site. Après cela, votre nouvelle police personnalisée sera utilisable.

Mise en file d’attente des polices – La « manière WordPress »

Si vous voulez vraiment ajouter des polices personnalisées à WordPress de la bonne manière, vous utiliserez votre fichier functions.php (à l’intérieur du répertoire de votre thème actuellement actif) et la fonction wp_enqueue_script ou wp_enqueue_style. Grâce à ça, vous pouvez prendre les extraits de code fournis par les sites de polices. Cependant, au lieu de les copier dans un fichier, vous les ajouterez à l’en-tête via une fonction. Quelle est la différence entre wp_enqueue_script et wp_enqueue_style ? Comme leur nom l’indique, l’un sert à ajouter des scripts, l’autre des feuilles de style. Laquelle est la bonne à utiliser dépend de la façon dont vos polices personnalisées sont fournies. Par exemple, Google Fonts vous propose des polices sous forme de feuilles de style. Dans ce cas, vous les ajouteriez à votre site WordPress de cette façon :

polices de caractères avec wordpress attente

Contrairement à cela, les polices d’Adobe Edge Web Fonts sont fournies en JavaScript. Par conséquent, pour les mettre en file d’attente sur votre site, le code ressemblerait à ceci :

polices de caractères avec wordpress script

C’est probablement la meilleure technique si vous utilisez WordPress.

Comment ajouter des polices personnalisées à WordPress via un plugin ?

Vous pouvez également ajouter des polices personnalisées à votre site WordPress en utilisant un plugin comme Easy Google Fonts. C’est l’un des plugins les plus populaires dans ce domaine.

Installez le plugin

La première étape consiste à installer le plugin. Pour ce faire, rendez-vous sur Plugins> Installer. Ensuite, recherchez le nom du plugin. Dans les résultats de la recherche, cliquez sur Installer maintenant et activez le plugin une fois qu’il est sur votre site.

Ajouter / modifier des polices sur votre site WordPress

Lorsque le plugin est actif, vous trouvez un nouvel élément de menu appelé « Typographie » sous Apparence> Personnaliser. Lorsque vous cliquez dessus et choisissez Typographie par défaut, vous trouvez une liste de commandes pour changer la police de vos paragraphes et en-têtes.

Cliquez simplement sur le menu déroulant où il est indiqué « Modifier la police » sur la partie de votre site pour laquelle vous souhaitez la modifier.

Ici, la partie la plus importante est celle de la famille de polices. Vous pouvez choisir un nouveau type de police dans l’ensemble de la bibliothèque de polices Google (utilisez Script / Sous-ensemble pour limiter les choix de police à ceux avec des caractères spéciaux). Les polices sont classées par police standard, serif, sans serif, écriture manuscrite etc. Cependant, vous pouvez également les rechercher par nom.

Configurer la police dans WordPress

Une fois que vous avez choisi une police, il existe de nombreuses options pour personnaliser davantage votre typographie. Tout d’abord, vous pouvez modifier le style de la police dans le menu du même nom. Cela contrôle l’épaisseur des lettres. De plus, sous Décoration de texte, vous pouvez barrer votre texte ou encore le surligner. La transformation de texte vous permet également de la mettre en majuscules ou en minuscules. Sous l’onglet Apparence, en haut, vous pouvez également contrôler la couleur de la police, la couleur d’arrière-plan, la taille de police, la hauteur de ligne et l’espacement des lettres.

Enfin, le positionnement vous permet de modifier d’autres paramètres tels que la marge, le remplissage ou encore la bordure. En bref, grâce à ces 2 méthodes, vous devriez pouvoir personnaliser complètement les polices de votre site à votre convenance. Facile, non ?

Un projet web ? Parlons-en ! Contactez-nous
CONTINUEZ SUR LE SUJETLes articles dans la même catégorie
mardi 11 Fév .2020

Drupal est 3ème sur le podium des CMS les plus utilisés au monde. Réputé pour sa robustesse, Drupal équipe toutes sortes de sites, des blogs personnels aux sites d’entreprise, politiques et gouvernementaux. Dans cet article, nous allons vous donner quelques astuces afin optimiser les performances de votre site propulsé par Drupal.

jeudi 23 Jan .2020

S’il est un critère crucial pour la réussite de votre site e-commerce, c’est la sécurisation des données. Dans ce domaine, PrestaShop figure parmi les CMS les plus performants, à condition de ne pas commettre d’erreur de paramétrage ou d’utilisation. Dans cet article, nous vous proposerons 7 bonnes pratiques pour bien sécuriser votre e-boutique sous PrestaShop.

mardi 21 Jan .2020

Drupal et WordPress figurent parmi les CMS les plus plébiscités pour leur simplicité, leur robustesse et la large gamme de modules additionnels dont ils disposent. Dans cet article, nous allons vous aider à identifier les forces et faiblesses de chacun et à déterminer lequel conviendrait le mieux à votre prochain site web.