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 :

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 :

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 :

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 ?

Trouver des polices pour WordPress ?

La sélection de polices pour votre site WordPress est un élément clé pour définir son style et son caractère. Google Fonts est une ressource privilégiée, offrant une vaste gamme de polices gratuites, optimisées pour le web et faciles à intégrer via CSS. Ces polices peuvent être facilement ajoutées à votre thème WordPress pour personnaliser l’aspect de votre texte et enrichir l’expérience utilisateur. Adobe Fonts propose également une sélection de qualité, idéale pour les sites web professionnels et créatifs.

En plus de ces sources, explorez des bibliothèques telles que Font Squirrel et DaFont pour des polices uniques et diversifiées. Ces sites offrent des fichiers de polices dans différents formats, adaptés à divers besoins de style et de branding. Lorsque vous choisissez des polices, considérez leur compatibilité avec WordPress et les extensions comme Elementor, ainsi que la facilité d’ajout à votre site via des fichiers CSS ou des options de personnalisation intégrées au thème.

Les éléments pour bien choisir sa police

Le choix des polices pour votre site WordPress doit se faire avec soin pour assurer une cohérence avec le thème et le style général du site. La lisibilité est le facteur le plus important, surtout dans un contexte web où les utilisateurs consultent les sites sur une variété d’appareils et de tailles d’écran. Une police bien choisie doit être claire et facile à lire, tout en reflétant l’identité de votre marque.

L’aspect émotionnel des caractères est également à prendre en compte. Chaque style de police transmet un message différent – professionnel, décontracté, créatif, etc. Il est important que le choix de la police s’aligne avec le message que vous souhaitez véhiculer à travers votre site. Pour cela, faire appel à une agence experte du webdesign est une excellente idée. De plus, la compatibilité technique est un aspect crucial. Vérifiez que les polices fonctionnent bien avec des extensions populaires comme Elementor et qu’elles ne ralentissent pas le temps de chargement de votre page.

Un projet web ? Parlons-en ! Audit gratuit

Elaine Goldfarb

Elaine, Directrice de production et pilier de l'agence Churchill depuis près 20 ans, a guidé et supervisé d'innombrables refontes de sites internet, affirmant sa position en tant que véritable experte en création de site web. Avec une profonde connaissance en UX, design et développement, elle est la force motrice derrière la transformation digitale de + de 150 clients.