Pas envie de lire ? Lancez l'audio pour écouter l'article !
Voiced by Amazon Polly

Les polices de caractère constituent la vitrine de votre thème. Si elles sont assez attirantes, elles peuvent rendre votre site web professionnel et optimiser l’expérience utilisateur. 

Par contre, si elles sont trop « affreuses », votre site serait ennuyeux avec une mauvaise expérience utilisateur. 

  • Alors, comment pouvez-vous trouver de bonnes polices de caractères ? 
  • Comment intégrer des polices sur WordPress ? 
  • Comment modifier la couleur et la taille des polices sur WordPress ? 

Comment intégrer des polices sur wordpress blog

Autant de questions à aborder dans cet article pour vous montrer comment intégrer des polices personnalisées sur votre site WordPress.

 

Chapitre 1. Pourquoi utiliser des polices personnalisées et vos différentes options ?

1.1. Pourquoi utiliser des polices personnalisées pour votre site web ?

WordPress propose par défaut des thèmes avec des polices de caractère déjà intégrées de base. Bien que ces polices soient excellentes et assez agréables, intégrer soi-même de nouvelles polices personnalisées présente assez d’avantages pour votre site :

  • Vous pourrez personnaliser le thème à votre goût 

Si vous n’êtes pas vraiment enchanté par le thème de base de votre site, vous avez la possibilité de personnaliser vos polices de caractères vous-même et obtenir un thème qui vous conviendrait le mieux.

Personnaliser son theme

  • Vous vous démarquez de la concurrence

Personnaliser vos polices de caractères rend votre design différent de celui de vos concurrents qui se contentent des polices WordPress par défaut. 

Beaucoup de propriétaires de sites WordPress se contentent des polices et du design par défaut que leur propose le CMS. 

En soi, ce n’est pas une mauvaise chose. Cependant si vous voulez marquer une différence entre votre site et celui de vos potentiels concurrents, la personnalisation des polices de votre thème est la meilleure résolution que vous puissiez prendre.

  • La conception de votre site est améliorée

Si vous choisissez les bonnes polices de caractère, la conception globale de votre site fait peau neuve, cela constitue un grand pas pour l’optimisation de l’expérience utilisateur. 

Il est clair que la majorité des visiteurs auront plus de plaisir à passer du temps sur un site optimisé avec une apparence captivante. Contrairement à un site avec des polices de caractères et un thème général dont ils se lassent.

Satisfaction des utilisateurs

Comment intégrer alors de nouvelles polices sur votre site WordPress ?

Ici, je vous présente 3 méthodes pour personnaliser vos polices de caractères sur WordPress. Vous avez le choix entre :

  • Utiliser des polices web ;
  • Ajouter manuellement des polices ; 
  • Héberger des polices sur votre site.

Il est important de souligner que ce ne sont pas les seules méthodes pour personnaliser vos polices de caractères. Il en existe d’autres, mais j’ai préféré vous montrer les plus populaires et faciles d’accès. 

Voyons maintenant comment fonctionne chacune de ces options. 

1.2. Les polices web

L’utilisation des polices web est la méthode généralement utilisée pour ajouter des polices à un site web. Il existe une large gamme de polices web à votre portée pour personnaliser l’apparence de votre site.

2.1.1. C’est quoi une police Web ?  

Les polices web sont des polices de caractères hébergées par un fournisseur externe. C’est-à-dire qu’elles sont stockées sur le site web de ce dernier. Pour y accéder, vous n’avez aucunement besoin de les télécharger. 

Il suffira d’encoder un lien qui dirige vers le site fournisseur pour récupérer les polices et les utiliser directement sur votre site. Vous avez aussi la possibilité d’utiliser une extension pour vous épargner le supplice du codage.

ce qu est une police Web 

Source : Studio1design 

Cependant, il est très important de ne pas confondre les polices web aux polices web-safe. Les polices web-safe existent comme un plan de secours. Elles s’affichent seulement lorsque le visiteur du site n’arrive pas à se connecter à la police que vous avez définie pour votre site.

Peut-être parce que le serveur du fournisseur est inaccessible ou que le navigateur du visiteur est obsolète et ne supporte pas la police personnalisée. 

2.1.2. Pourquoi utiliser une police Web ?

L’avantage que vous avez à utiliser des polices web est l’accès à une multitude de polices sans forcément les héberger sur votre site ou localement sur votre ordinateur. 

Vous gagnerez bien plus de temps à créer quelques lignes de code ou à installer une extension plutôt que de télécharger et ensuite charger des fichiers polices. 

De plus, lorsque le fournisseur en question aura à effectuer des mises à jour sur sa gamme de polices, vous accéderez immédiatement aux versions actualisées des fichiers polices que vous aviez sélectionnés. 

Assez flexible n’est-ce pas ?

2.1.3. Où trouver des polices web ?

La plupart des fournisseurs populaires fonctionnent sans nécessité de souscrire à un abonnement. Toutefois, les polices peuvent être payantes ou gratuites, en fonction du fournisseur. 

Les fournisseurs les plus connus sont :

Google Fonts est le premier des fournisseurs de polices web. Il met à votre disposition une gamme extra large de polices web gratuites. 

Vous avez aussi la possibilité de sauvegarder les polices sur votre ordinateur et les utiliser pour vos documents hors-lignes et ceci de façon totalement gratuite.

 sauvegarde des polices

Pour ajouter des polices web sur votre site WordPress depuis Google Fonts, l’une des méthodes les plus simples est l’utilisation de l’extension Easy Google Fonts

Vous n’aurez qu’à télécharger le plugin et insérer les polices de la « famille de polices » Google Fonts dans l’onglet typographie du tableau de bord Apparence et personnalisation de votre WordPress.

Une fois cette étape passée, cliquez sur ‘’Enregistrer et publier’’ pour activer vos modifications.

 Fonts.com

Si vous recherchez des polices haut de gamme, Fonts.com est la meilleure option qui se présente à vous. Ce fournisseur, non gratuit met à votre disposition des polices de qualité supérieure. 

Adobe Typekit requiert un peu plus de dextérité que Google Fonts. C’est un marché réservé aux professionnels de la typographie, mais les amateurs peuvent également y trouver pour leur compte. 

Adobe Typekit propose aussi un grand nombre de polices gratuites pour ceux qui ne veulent pas investir et accéder aux options premium. L’accès à cette base de polices requiert juste une inscription.

Adobe Typekit

Pour utiliser Adobe Typekit, allez dans la barre de recherche depuis l’interface d’accueil et recherchez « kits ». 

Sur l’écran suivant, sélectionnez ensuite l’option  «Créer un nouveau kit ». Il vous sera demandé d’entrer le nom de domaine de votre site comme billet pour la prochaine phase. 

Il vous sera ensuite fourni un extrait javascript que vous devriez sauvegarder dans une petite note texte sur votre ordinateur.

Votre kit est ainsi prêt. Dès lors, vous pourrez sillonner la collection d’Adobe Typekit et ajouter toutes les polices qui vous plaisent à votre kit.La partie suivante est l’encodage sur l’interface de votre site WordPress. Vous vous souvenez de l’extrait javascript que je vous avais demandé de sauvegarder ? 

C’est le moment de le coller dans le fichier header.php de votre thème dans les onglets Apparence et Éditeur.

Mise ajour du fichier header

Cliquez ensuite sur « Mettre le fichier à jour » et le tour est joué. Vous pourrez ajouter d’autres polices d’Adobe Typekit en modifiant votre feuille de style.

Des fournisseurs de polices de caractères, il en existe plein, je vous ai juste cité les plus populaires. 

Avec tous ces fournisseurs, comme avec Google Fonts, vous pouvez directement intégrer les polices à vos publications en créant des lignes de code ou en utilisant une extension que vous installerez sur votre site WordPress. 

Aussi, il est bien de rappeler que les fournisseurs comme Google fonts vous offrent la possibilité d’avoir un aperçu du résultat que vous obtiendrez après avoir définitivement opté pour telle ou telle police de caractère.

1.3. Ajouter manuellement des polices

La deuxième option que je vous propose pour personnaliser vos polices de caractères sur votre site WordPress, c’est d’ajouter manuellement des polices à votre site. 

Ces polices peuvent être des polices web ou des polices que vous hébergez localement sur votre ordinateur.

Pour ajouter manuellement des polices web à votre site, vous devrez créer des lignes de code pour votre feuille de fonction et votre feuille de style. 

Si vous utilisez un thème personnalisé, modifier la feuille de fonction et la feuille de style ne vous causeront certainement pas d’ennui. 

Par contre, si vous utilisez un thème WordPress, vous aurez nécessairement besoin de récréer votre thème. Voyons donc les étapes pour ajouter manuellement des polices web :

  • Sélectionner une police

Vous devez en premier lieu sélectionner une police de votre choix et récupérer son lien.

  • Intégrer le lien de la police choisie

La deuxième étape consiste à intégrer le lien copié dans la feuille de fonction de votre thème. Pour le faire, vous devez remplacer dans le fichier fonction, le lien de la police existante par celui que vous a généré le fournisseur et que vous avez initialement copié. 

Vous venez ainsi de mettre en file d’attente votre police. Celle-ci ne fonctionnera pas immédiatement. Vous devez passer à l’étape suivante.

  • Ajouter la police à la feuille de style

Pour que la police fonctionne sur votre site, vous devez l’ajouter à la feuille de style de votre site. 

Pour le faire, ajoutez le code permettant d’appliquer les polices à votre fichier style.css et sélectionner l’élément que vous voulez styliser (le corps de votre texte ou les heads).

Pour finir, enregistrez la feuille de style modifiée et vérifiez si vos modifications fonctionnent sur le site. 

Si tout ceci semble complexe, voici une vidéo : 

https://youtu.be/zo_TIv5TyWE 

Toutefois, il serait également judicieux d’ajouter une police secours ou police web-safe au cas où l’un des visiteurs de votre site ne serait pas en mesure d’accéder à la police de caractère que vous avez appliqué. 

D’où l’importance d’avoir un site optimisé, bien conçu et mobile-friendly. Je vous montrerais plus bas comment télécharger et convertir des fichiers polices de caractères.

1.4. Héberger des polices sur votre blog 

Un autre moyen est d’héberger les polices sur le serveur de votre site. L’un des avantages de cette méthode est que vous avez le monopole de la sécurité de votre site : pas de lien vers un tiers.

Les polices à héberger sont des polices web disponibles en téléchargement sur les sites fournisseurs. Vous devez quand même vérifier si la licence du site fournisseur vous autorise à poser ce genre d’acte.

Widget pour WordPress 2

Vous pouvez également héberger des polices de caractères localement, les téléverser sur votre site et les insérer à votre feuille de style sans les mettre en file d’attente dans votre fichier de fonctions.

Cela revient concrètement à : 

  • Télécharger premièrement les polices de votre choix sur un site fournisseur. Pour pouvoir utiliser ces fichiers polices sur votre site web, assurez-vous qu’ils soient sous le format woff. Dans le cas échéant, vous pouvez utiliser un convertisseur de format pour les rendre utilisables. Nous y reviendrons plus en détail dans le chapitre suivant. 
  • Ensuite, vous aurez à téléverser dans le dossier de votre thème, tous les fichiers polices de caractères téléchargés. Il serait quand même plus judicieux et tactique de créer un sous-dossier nommé ‘’polices’’ ou ‘’fonts’’ dans votre dossier thème où se retrouveront tous vos fichiers polices de caractères. C’est un point de plus dans la personnalisation et l’optimisation de votre site WordPress. 
  • Pour finir, vous n’aurez plus qu’à intégrer les polices à votre feuille de style en suivant le même processus et voir votre site changer d’apparence de façon subliminale.

Maintenant que nous avons exploré ces diverses options qui s’offrent à vous pour la personnalisation de vos polices de caractères, je vais partager avec vous comment convertir vos fichiers polices. 

Pour pouvoir intégrer manuellement des polices sur votre site WordPress, vous devez nécessairement les télécharger au préalable et les téléverser sur votre site. Vous devez également vous assurer que ces fichiers soient au bon format. 

Pour cela :

  • Commencer par visiter le site fournisseur que vous aurez choisi ; 
  • Sélectionner ensuite la police de caractères qui vous convient ; 
  • Rendez-vous dans la section « Licence et utilisation » du site pour savoir si vous êtes autorisé à télécharger et utiliser ce fichier police ; 
  • Cliquez sur l’onglet « télécharger » et sauvegardez le fichier zip. localement sur votre ordinateur ;

sauvegarde du fichier zip

  • Ouvrez ensuite le fichier zip. sur votre ordinateur pour extraire les polices de caractères. Généralement, vous les trouverez aux formats WOFF et WOFF 2.0. 

Maintenant que nous avons vu comment intégrer des polices sur WordPress, essayons de les modifier.

Chapitre 2. Comment modifier ses polices de caractères sur WordPress ?

2.1. Modifier ses polices de caractères sur WordPress

Vous avez la possibilité de modifier vos polices de caractères et vous pouvez le faire de différentes manières :

  • Utiliser l’éditeur de bloc ou l’éditeur classique ;
  • Utiliser l’outil de personnalisation WordPress ;
  • Faire les modifications dans les articles ;
  • Faire les modifications dans votre feuille de style.

2.1.1. L’éditeur de bloc Gutenberg

Avec l’éditeur de bloc Gutenberg, vous avez la possibilité de modifier le style du texte dans votre article ou sur votre page. Pour cela, sélectionner la partie que vous souhaitez modifier.

 l editeur de bloc Gutenberg 

Source : kinsta.com

Un petit menu apparaîtra, cliquez sur les icônes qui se présentent pour modifier votre texte. Vous pouvez mettre le texte en gras, en italique, le souligné, etc.

2.1.2. L’éditeur classique

L’éditeur classique est présent dans les anciennes versions de WordPress et comprend une barre d’outils où vous pourrez facilement modifier vos textes.

L editeur classique

Source : kinsta.com

2.1.3. L’outil de personnalisation WordPress 

Dans l’outil de personnalisation, vous pouvez modifier le texte en ajoutant un CSS manuel. Pour cela, entrez dans l’onglet personnalisation et cliquez sur « Ajouter un CSS supplémentaire ». 

Remplissez ensuite la boîte de dialogue du CSS que vous voulez ajouter.

2.1.4. Faire les modifications dans la feuille de style

Pour ce cas de figure, si vous utilisez un thème WordPress par défaut, vous devrez créer un thème enfant. 

Dans ce thème enfant, vous aurez à établir une nouvelle feuille de style où vous intégrerez  votre nouveau style de police.

Au cas où vous utilisez un thème personnalisé, ouvrez votre dossier thème wp-content/themes et modifiez le CSS dans le fichier style.css.

2.2. Comment modifier les couleurs de police sur WordPress ?

Vous pouvez également procéder à un changement de couleur pour quelques textes de votre site avec les mêmes méthodes que pour modifier le style de polices.

2.2.1. Éditeur Gutenberg

L’éditeur de bloc Gutenberg vous permet non seulement de modifier la couleur du texte, mais aussi son arrière-plan. Pour cela, vous devez : 

  • Ouvrez le bloc ;
  • Accédez à l’onglet « Réglages de couleur » ; 
  • Sélectionnez ensuite les palettes de couleurs qui vous plaisent pour modifier la couleur de vos blocs de texte et leur arrière-plan.

2.2.2. L’éditeur classique de WordPress 

L’éditeur classique des versions anciennes de WordPress vous offre également la possibilité de changer uniquement la couleur du texte que vous avez sélectionné.

 L editeur classique de WordPress

2.2.3. La personnalisation des thèmes 

Certains thèmes permettent de changer les couleurs de votre site.  Mais vous devez d’abord ajouter du CSS dans l’outil de personnalisation pour pouvoir modifier les couleurs. 

Cliquez sur l’onglet « Ajouter un CSS supplémentaire » dans la section personnalisation et entrez votre CSS dans la zone de texte.

Ajout d un CSS supplementaire

Source : kinsta.com

2.2.4. La feuille de style

La feuille de style vous permet également de modifier les couleurs de police. Mais pour l’utiliser, assurez-vous de créer un thème enfant et une nouvelle feuille de style si votre thème est un thème par défaut.

Pour ce qui est de la taille des polices, vous pouvez également la modifier avec ses différentes méthodes. Prenez quand même garde, car si vos paragraphes diffèrent trop en taille, ils sembleront incohérents et difficiles à lire.

feuille de style

Pour les couleurs, si la combinaison rendait l’accès difficile, vous recevrez un avertissement de WordPress. Notez également que si les couleurs sont de trop, votre site n’aura pas un aspect vraiment professionnel, ce qui décevra certainement vos visiteurs.

En parlant de ‘’plaire à vos visiteurs’’, je vous montre comment choisir les bonnes polices de caractères adéquates à intégrer sur votre site WordPress.

Chapitre 3. Bonnes pratiques pour trouver de bonnes polices de caractères 

Il est bien de personnaliser vos polices de caractères. Mais il est encore mieux de choisir et d’appliquer des polices de caractères adéquates. 

Comme je le disais plus haut, les polices de caractères sont la vitrine de votre thème. Elles reflètent d’une manière ou d’une autre l’image de votre site web.

3.1. Les éléments à prendre en compte pour bien choisir vos polices de caractères

La première des choses est de choisir selon l’image que vous voulez donner à votre site, à votre marque. Vous devez également mettre l’accent sur :

  • La lisibilité : Si la police est peu visible ou illisible, l’interface de votre site déplaira et les visiteurs aussi se lasseront de vous lire à cause du mauvais choix de police de caractère.
  • La taille des caractères : Choisissez une police de caractère avec une bonne taille pour rendre votre blog plus agréable à parcourir.
  • L’interlignage et de l’espacement entre les caractères : Il est de notoriété publique que le flux internet est désormais détenu par les smartphones. Imaginez-vous lire un billet de blog avec des caractères difficiles à discerner sur votre smartphone.

 billet de blog

Il est aussi important de faire un bon mixage des polices de caractères. Vous avez la possibilité d’opter pour des polices de caractères de même famille ou piocher celles qui vous intéressent. 

Sachez donc faire la bonne combinaison pour ne pas alourdir votre thème ou rater votre personnalisation. Il existe également plusieurs outils en ligne comme Fontjoy ou Fontpair pour vous aider à créer la combinaison parfaite.

3.2. Astuces pour choisir

Il n’est pas très évident de faire le bon choix qui puisse à la fois vous plaire, plaire à vos visiteurs et rendre votre WordPress ‘’beautiful’’ comme le diraient les Anglais. 

Pour vous aider, voici quelques astuces qui devraient vous orienter vers un bon choix de police :

  • Cherchez sur vos documents imprimés des polices assez intéressantes pour être utilisées comme polices web. 
  • Choisissez les polices les plus populaires des banques de polices. Elles sont utilisées par un grand nombre, donc familières aux internautes.
  • Visitez les sites de vos concurrents et voir ce qu’ils proposent afin de mieux répondre.

Prenez quand même la peine d’expérimenter vos choix avant de les appliquer à votre site. Évitez aussi de mettre en file des variations de polices de caractères que vous n’utilisez pas ou d’héberger sur votre site des polices que vous n’utilisez pas. 

Assurez-vous également que les polices que vous utilisez sont correctement mises en file d’attente.

Pour résumer

La personnalisation des polices de caractères est un atout important si vous voulez démarquer votre site WordPress des autres. 

Bien que ce ne soit pas un exercice facile, cela contribue à l’embellissement du thème ou du design de votre site et à l’optimisation de l’expérience utilisateur. 

Pour y arriver, diverses options s’offrent à vous :

  • Coder des polices web dans votre thème et les utiliser ;
  • Installer sur votre site une extension vous permettant d’utiliser les polices web ;
  • Ajouter manuellement depuis une source locale des polices préalablement téléchargées ;
  • Héberger des polices sur votre site WordPress.

Le choix des polices est aussi tout important que leur format. Veillez donc à sélectionner les polices adéquates pour votre image et modifiez-les à votre guise. 

Prévoyez également des polices web-safe ou polices secours pour les cas où les visiteurs n’arriveront pas, pour une raison ou une autre à voir les polices que vous avez intégré. 

Toutefois, n’abusez quand même pas des modifications. Votre site risquerait d’être difficile d’accès et vos textes lassants et difficiles à lire.

Vous savez donc désormais comment intégrer des polices sur votre site WordPress, comment modifier ses polices et la couleur des textes et aussi comment choisir les polices de caractères adéquates pour rendre votre site attrayant et professionnel.

2020-11-04T18:32:59+01:00

À propos de l'auteur :

Fondateur de l'agence SEO Twaino, Alexandre Marotel est passionné par le SEO et la génération de trafic sur internet. Il est l'auteur de nombreuses publications, et détient une chaine Youtube qui a pour but d'aider les entrepreneurs à créer leurs sites web et à être mieux référencés dans Google.

Laisser un commentaire