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 ! Audit gratuit
CONTINUEZ SUR LE SUJETLes articles dans la même catégorie
arborescence site web
jeudi 17 Sep .2020

L’arborescence d’un site web permet d’avoir une vision globale du site et des différents chemins de navigation, avant de préparer sa refonte. Concevoir une arborescence signifie classer, faire des choix, et cela peut prendre du temps. C’est un exercice difficile, mais sans une navigation bien pensée, un site web, aussi joli soit-il, a peu de chances d’atteindre ses objectifs.

Productivité et travail à distance
vendredi 15 Mai .2020

Si le télétravail est en constante augmentation ces dernières années, beaucoup d’entre nous avons dû y recourir massivement et en urgence ces derniers mois. Cette situation est appelée à durer et se normaliser dans de nombreux métiers. Malgré les nombreux avantages que présentent le travail à distance à titre individuel et collectif, il comporte néanmoins ses propres défis.

Outils télétravail
mardi 21 Avr .2020

Beaucoup d’entre nous ont dû adopter de nouveaux outils de télétravail en urgence. Pas simple d’organiser la communication d’une équipe à distance quand on n’y a pas été préparé ! Ces nouvelles façons de travailler étant appelées à durer, prenons le temps de réévaluer les outils à notre dispositions pour identifier ceux qui conviennent le mieux à chaque équipe.