Comment Modifier les Polices dans WordPress (Changer la Taille, la Couleur, les Optimiser)

Les polices peuvent faire la différence entre un site web ennuyeux et un beau site web. En apprenant à changer la police de caractères dans WordPress, vous pouvez donner à votre site un aspect moderne, professionnel et personnalisé.

Mais quelle est la meilleure façon d’utiliser les polices de caractères dans votre site WordPress, et comment choisir les bonnes polices pour votre design ?

Dans ce guide, je vais vous montrer tout ce que vous devez savoir sur les polices de caractères dans WordPress.

Polices de Caractères : La Terminologie

Commençons par examiner la terminologie des polices de caractères sur le Web.

• Les polices Web (alias polices HTML) sont des polices hébergées sur un site Web tiers et liées à votre site.
• Les polices hébergées localement sont juste ça (hébergées sur les serveurs de votre site web.)
• Les polices intégrées pour le Web (web-safe) sont une gamme limitée de polices préinstallées sur (presque) tous les ordinateurs et auxquelles vous pouvez être assez sûr que tous vos visiteurs auront accès.

Jetons un coup d’oeil aux options pour ajouter des polices à votre site Web.

Comment Ajouter des Polices à Votre Site WordPress (les Options)

Avant de vous lancer dans l’ajout de polices à votre site, il est utile que vous compreniez les options qui s’offrent à vous.

Les polices font partie du design de votre site, donc dans la plupart des cas, elles seront codées via votre thème – mais pas toujours. Dans certains cas, vous pouvez décider d’utiliser une extension pour activer un plus grand nombre de polices dans votre site.

Voici quelques-unes des options qui s’offrent à vous :

• Utiliser des polices Web telles que Google Fonts en installant une extension qui vous y donne accès.
• Utiliser des polices web en les codant dans votre thème et en les recherchant (pas aussi délicat que ça en a l’air).
• Héberger vos polices sur votre propre site web et les ajouter à votre thème.

Il y a deux distinctions principales – si vous utilisez des polices Web, qui sont hébergées en dehors de votre site, ou si vous choisissez d’héberger vos fichiers de polices vous-même. Dans ce guide, nous examinerons les avantages et les inconvénients de chacun.

Commençons par regarder les polices web : pourquoi vous pourriez choisir de les utiliser et les façons de les ajouter à votre site.

Utilisation des Polices Web dans WordPress

Les polices Web sont le moyen le plus populaire d’ajouter des polices à votre site Web parce qu’elles permettent d’ajouter facilement une vaste gamme de polices.

Que Sont les Polices Web ?

Les polices Web sont des polices hébergées sur le site Web d’un fournisseur tiers. Au lieu de copier les fichiers sur votre propre site, vous créez un lien vers le site Web du fournisseur et elles y sont récupérées.

Cela signifie que vous avez accès à une large gamme de polices sans avoir à utiliser d’espace serveur sur votre propre hébergement. Cela signifie également que si les fichiers de polices changent au fil du temps, vous n’avez pas besoin de mettre à jour vos fichiers et vous aurez automatiquement accès aux nouvelles versions des fichiers à partir du fournisseur.

Les polices Web peuvent être gratuites ou vous pouvez les payer, généralement par abonnement. Certains fournisseurs populaires sont :

• Google Fonts. Le plus grand fournisseur de polices web gratuites. Vous pouvez également télécharger toutes leurs polices sur votre ordinateur, ce qui signifie que si vous voulez créer des documents hors ligne en utilisant les mêmes polices que votre site Web, vous le pouvez. Et tout est gratuit.
• Adobe Edge Web Fonts. Celles-ci sont également gratuites. Bien qu’elles soient conçues pour être utilisées avec les produits Adobe, elles fonctionnent bien sur tous les sites Web.
• Fonts.com est un fournisseur de polices haut de gamme, que vous devrez peut-être utiliser si vous devez faire correspondre votre police Web à une police provenant de votre matériel imprimé et que la police n’est pas disponible via un fournisseur gratuit.
• fontfabric est un concepteur de polices de caractères qui propose des polices de qualité supérieure à utiliser comme polices Web et en ligne. Vous devrez payer pour cela, mais vous obtiendrez quelque chose de plus individuel que si vous utilisiez les polices Google.

Tous ces fournisseurs vous permettent de servir les polices directement à partir de leurs serveurs en ajoutant du code sur votre site WordPress ou parfois en utilisant une extension qui signifie que vous n’avez pas besoin d’ajouter de code.

Les polices Web sont différentes des polices web-safe. Vous pouvez utiliser celles-ci comme solution de rechange pour les polices Web au cas où le visiteur de votre site Web ne pourrait pas se connecter à la police Web pour une raison quelconque. Je vous montrerai comment faire plus tard dans cet article.

Pourquoi Utiliser les Polices Web ?

Maintenant que vous savez ce que sont les polices Web, pourquoi choisiriez-vous de les utiliser au lieu d’héberger vos propres polices ?

Voici quelques-uns des avantages :

• Facilité : l’ajout de quelques lignes de code ou l’installation d’une extension est plus rapide que le téléchargement et le chargement des fichiers de polices et facilite le changement des polices si vous décidez de le faire à l’avenir.
• Gamme de polices : il y a des milliers de polices disponibles en tant que polices web et la liste ne cesse de s’allonger.
• Mises à jour : Si le fichier de police a besoin d’être mis à jour, peut-être pour ajouter des polices variables (dont d’autres prochainement) ou pour ajouter des caractères supplémentaires, votre site aura accès à la nouvelle version sans que vous ayez à faire quoi que ce soit.

La plupart des sites Web utilisent des polices Web, avec une web-safe pour le dépannage. Et avec WordPress, c’est très facile à faire.

Trouver les Meilleures Polices Web pour Votre Site

Après avoir décidé d’utiliser des polices Web, vous avez maintenant une décision difficile à prendre : quelles polices utiliser ?

Dans le bon vieux temps où tous les développeurs Web avaient accès à ces polices pré-installées et sûres pour le Web, c’était une décision très facile. Souhaitez-vous utiliser une police avec ou sans serif ? (Les polices Serif ont une petite ligne ou un trait à la fin d’un trait plus grand dans chaque caractère, les polices sans empattement n’en ont pas). Après avoir pris cette décision, vos choix étaient très limités.

Mais maintenant, le monde est à votre portée.

Voici quelques conseils pour vous aider à choisir la meilleure police pour votre site :

• Regardez vos documents imprimés. Y a-t-il des polices déjà utilisées que vous pouvez trouver comme polices web ? Sinon, pouvez-vous trouver quelque chose de similaire ?
• Consultez les sites Web de vos concurrents. Quels types de polices utilisent-ils ? Je ne vous recommande pas de les copier, mais il peut y avoir certains styles qui transmettent le bon type d’image aux utilisateurs de votre site Web.
• Pensez au genre d’humeur que vous voulez transmettre avec vos polices. Certaines polices sont plus modernes, d’autres plus traditionnelles. Certains sont amusantes, d’autres plus sérieuses.
• Tenez-vous en à celles qui sont faciles à lire pour le corps du texte, et utilisez des polices plus intéressantes pour les titres si vous le souhaitez.
• Choisissez parmi les Google Fonts les plus populaires – elles seront familières aux visiteurs du site Web et sont faciles à lire.

Une fois que vous avez choisi vos polices, prenez le temps de les expérimenter. Les fournisseurs de polices comme Google Fonts vous permettent de saisir du texte personnalisé pour voir à quoi cela ressemble dans la police de votre choix. Une fois que vous voyez votre propre texte dans la police, cela peut vous aider à décider si c’est la bonne police pour vous.

And remember, using web fonts makes it very easy to change your fonts so you can always switch to another option while you’re developing your theme or setting your site up.

Comment Ajouter des Polices Web avec une Extension WordPress

Vous avez donc choisi la police de caractères de votre choix, il est maintenant temps de l’ajouter à votre site.

Si vous ne vous sentez pas à l’aise d’ajouter du code à vos fichiers de thème, vous pouvez installer une extension qui vous permettra d’accéder à Google Fonts et d’utiliser la police que vous voulez sur votre site.

L’extension Google Fonts Typography vous donne accès à l’ensemble de la bibliothèque de Google Fonts et vous permet de les consulter via l’outil de personnalisation de WordPress.

Installez l’extension sur votre site comme n’importe quelle autre extension, puis activez-la.

Allez dans Apparence > Personnaliser pour accéder à la personnalisation. Vous verrez une section pour Google Fonts.

Cliquez sur ce lien pour accéder aux réglages de vos polices. Configurez-les comme suit :

Réglages de base : Configurez la police par défaut pour votre corps de texte et vos titres, ainsi que les boutons éventuels. Dans la capture d’écran ci-dessous, vous pouvez voir que j’ai ajouté une police à empattement facile à lire pour le corps et une police plus distinctive pour les titres.

Réglages avancés : Ici, vous pouvez configurer l’image de marque (titre et description du site), la navigation (votre menu), le contenu et les titres plus en détail, votre barre latérale et votre pied de page. Vous pouvez également charger des polices sans les affecter à quoi que ce soit, ce qui signifie que vous pouvez les ajouter à tout CSS personnalisé dans la personnalisation.

Chargement des polices : S’il y a des poids de police dont vous n’avez pas besoin (Ex : gras, italique, etc.), vous pouvez les décocher ici pour qu’ils ne ralentissent pas inutilement votre site.

Débogage : Utilisez cette option pour forcer l’affichage de toutes les polices qui ne fonctionnent pas comme elles le devraient.

Passez un peu de temps à travailler avec ces réglages et à les tester dans la personnalisation pour vous assurer qu’ils fonctionnent comme vous le souhaitez. Lorsque vous êtes satisfait de vos réglages, cliquez sur le bouton Publier. Ne quittez pas la personnalisation sans cliquer sur Publier ou vous perdrez vos modifications.

Modification des Couleurs de Police

La version gratuite de l’extension ne vous permet pas de modifier les couleurs de vos polices. Pour ce faire, vous devrez soit acheter la version Premium, soit utiliser l’option CSS supplémentaire dans la personnalisation.

Revenez à l’écran d’accueil de l’outil de personnalisation et cliquez sur l’onglet CSS supplémentaire. Une zone de texte vide vous sera présentée dans laquelle vous pourrez ajouter votre propre CSS.

Pour trouver l’élément dont vous avez besoin pour le style, sélectionnez-le et cliquez sur utilisez l’inspecteur de code de votre navigateur pour savoir de quelle couleur a le style.

Ci-dessous, j’utilise Google Chrome et j’ai ciblé un élément h1.

Dans mon thème WordPress, il a hérité sa couleur de l’élément body. J’aimerais ajouter quelque chose de plus précis. Dans la zone de texte de votre CSS, saisissez le CSS de votre élément et la couleur que vous souhaitez utiliser. Le mien ressemble à ça :

h1 {
 color: #f542f5;
}

Cela me donne un élément h1 rose vif :

Vous pouvez répéter cette opération avec tous les éléments de texte auxquels vous souhaitez ajouter de la couleur, ainsi qu’avec les polices personnalisées qui n’étaient pas incluses dans les options des autres écrans. Si vous voulez savoir quel CSS utiliser pour les polices, lisez la section de cet article sur la modification de vos polices via CSS.

Comment Ajouter Manuellement des Polices Web

Si vous ne souhaitez pas ajouter une extension supplémentaire sur votre site et avoir accès au code de votre thème, vous pouvez installer et utiliser des polices web en ajouter du code à votre fichier de fonctions et à votre feuille de style.

Si votre site utilise un thème personnalisé que vous pouvez modifier, vous pouvez modifier le fichier de fonctions et la feuille de style de votre thème. Mais si vous utilisez un thème d’une tierce partie que vous acheté ou obtenu à partir du répertoire de thème de WordPress, alors vous aurez besoin de créer un thème enfant. Vous devrez alors lui donner deux fichiers : functions.php et style.css.

Passons en revue le processus d’ajout manuel de polices Web à votre thème. Je vais travailler avec Google Fonts pour cet exemple, car c’est le plus couramment utilisé et c’est gratuit.

Choisir une Police et Récupérer le Lien

Commencez par choisir votre police dans Google Fonts. Ajoutez-la à votre bibliothèque en cliquant sur l’icône plus à côté.

Cliquez sur l’onglet au bas de l’écran de votre bibliothèque et vous verrez un code que vous pourrez ajouter à votre site. Si vous voulez ajouter des poids et des styles de police supplémentaires, cliquez sur l’onglet Personnaliser et sélectionnez ceux que vous voulez. Puis retournez à l’onglet Intégrer.

Ne copiez pas le code exactement : vous l’utiliserez, mais au lieu d’appeler la police dans la section <head> de l’en-tête de votre site, vous mettrez les polices dans la file d’attente. C’est la bonne façon de faire dans WordPress.

Au lieu de cela, à partir de la section Intégrer la police, copiez uniquement le lien vers la police.

Donc, dans mon cas, Google Fonts me donne ce code :

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

J’ai juste besoin de copier ce morceau :

https://fonts.googleapis.com/css?family=Raleway

Mise en Attente de Police(s)

Ouvrez le fichier de fonctions de votre thème et ajoutez ce qui suit, en remplaçant le lien pour ma police par le lien que Google vous a donné pour la vôtre :

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Ceci interroge le style à partir des serveurs Google Fonts. Si vous avez besoin d’ajouter d’autres polices à l’avenir, vous pouvez soit ajouter une nouvelle ligne à votre fonction, soit l’ajouter dans la même ligne, comme cela :

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Les polices Merriweather et Raleway seront toutes les deux mises en file d’attente.

Ajout de Police(s) à Votre Feuille de Style

Cela ne fera pas encore fonctionner la police dans votre site : vous devez quand même l’ajouter à la feuille de style de votre thème.

Ouvrez le fichier style.css dans votre thème et ajoutez le code pour styliser les éléments individuels avec vos polices web. Assurez-vous que vous l’ajouter après n’importe quel CSS existant pour les polices, ou il peut être outrepassé.

C’est à vous de choisir les éléments de style, mais il est courant d’utiliser une police lisible pour l’élément de corps et quelque chose de plus fantaisiste pour les en-têtes.

body {
 font-family: 'Raleway', sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', serif;
}

Dans le cas ci-dessus, tout sur la page utilisera la police Raleway, sauf les éléments h1, h2 et h3, qui utiliseront Merriweather.

Maintenant, enregistrez votre feuille de style et vérifiez votre site pour vous assurer que tout fonctionne comme prévu. Si les nouvelles polices ne s’affichent pas, essayez de vider le cache de votre navigateur et vérifier que les polices ne sont pas remplacées par un style pour les polices plus bas dans la feuille de style. C’est pourquoi c’est une bonne idée soit d’ajouter votre nouveau style au bas de la feuille de style, soit de remplacer le style de police existant par votre nouveau style (encore mieux).

Ajout D’une Police de Secours

Il peut y avoir des occasions où quelqu’un visite votre site et ne peut pas accéder aux fichiers de polices web pour une raison quelconque. Peut-être qu’ils sont sur un une mauvaise connexion ou l’utilisation d’un ancien périphérique qui n’affiche pas les polices Web. Ou peut-être que votre fournisseur de polices Web a des problèmes techniques.

Pour cette raison, c’est une bonne idée d’avoir une solution de secours en place.

Le code qui vous est donné par les polices Google a déjà comme sauvegarde de simplement spécifier serif or sans-serif, mais nous pouvons aller un pas plus loin que cela.

Utilisez l’une des polices prêtes pour le Web qui seront déjà installées sur la machine de votre visiteur, puis incluez la deuxième solution de repli de serif or sans-serif, au cas où ils utilisent un appareil mobile qui ne possède même pas les polices prêtes pour le Web.

Retournez à votre feuille de style et modifiez votre CSS en quelque chose comme ceci :

body {
 font-family: 'Raleway', Helvetica, sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Cela signifie que les personnes qui visitent votre site verront vos polices Web si tout va bien ; mais si ce n’est pas le cas, elles verront Helvetica ou Georgia, ou à défaut, elles verront les polices avec ou sans empattement que leur navigateur est capable de charger.

Hébergement de vos Propres Polices dans WordPress

Certains développeurs préfèrent ne pas utiliser de polices Web mais plutôt héberger les polices sur leurs propres serveurs et vous pourriez en faire partie.

Cela peut être dû à un ou plusieurs facteurs, dont les suivants la sécurité, le rendement ou le budget.

Si la performance vous préoccupe, vous pouvez optimiser la performance de vos polices Web de plusieurs façons, qui sont abordées plus loin dans cet article. Mais si vous avez décidé de choisir la route locale, vous devrez savoir comment le faire.

Pourquoi Héberger vos Propres Polices ?

L’utilisation des polices Web est souvent plus facile et peut vous donner plus de flexibilité tout en prenant moins de place sur votre serveur. Mais ça ne veut pas dire qu’il n’y a pas d’occasions où l’hébergement local des polices pourrait ne pas être plus approprié.

Raisons pour lesquelles vous voudrez peut-être héberger les polices localement :

Vous constaterez peut-être que vous pouvez contourner certains de ces problèmes

• Pour des raisons de sécurité, vous préférerez peut-être ne pas faire appel à des ressources provenant de fournisseurs tiers, sachant que la sécurité de votre propre site est contrôlée par vous.
• Vous constaterez peut-être que l’utilisation d’un service d’une tierce partie a un impact sur la performance de votre site.
• Vous avez peut-être acheté un fichier de police et vous souhaitez l’utiliser. Assurez-vous que votre licence inclut l’utilisation du site Web ainsi que l’utilisation dans les documents imprimés.
• Votre site peut être hébergé localement, par exemple sur un intranet, et les utilisateurs n’auront pas accès aux polices Web lorsqu’ils l’utilisent.

Où Trouver les Polices que Vous Pouvez Héberger Localement

De nombreuses polices Web peuvent également être téléchargées pour être utilisées en tant que polices hébergées localement, mais vous devrez vérifier que cela est autorisé par la licence. Dans le cas de Google Fonts, c’est autorisé.

Vous découvrirez également qu’il existe des polices non disponibles sous forme de polices Web que vous pouvez télécharger et héberger vous-même. Tout fichier de police que vous pouvez télécharger sur votre ordinateur peut également être téléchargé sur votre site Web et y être stocké. Si vous avez besoin d’utiliser une police qui n’est pas disponible en tant que police Web pour faire le lien avec votre fichier ce sera la solution, mais assurez-vous que votre licence le permet

Comment Ajouter des Polices Hébergées Localement à Votre Site WordPress

Donc vous savez que vous voulez héberger vos polices localement, comment procédez-vous pour les configurer ?

Le processus est différent de l’utilisation des polices Web. Vous devez téléverser le(s) fichier(s) de police sur votre site et créer un lien vers eux dans votre feuille de style sans avoir à les mettre en file d’attente dans votre fichier de fonctions.

Télécharger et Convertir les Polices

Commencez par télécharger les polices que vous voulez utiliser. Dans Google Fonts, vous pouvez le faire en cliquant sur l’icône de téléchargement lorsque vous visualisez la police dans votre bibliothèque.

Dézippez le fichier de police sur votre ordinateur et supprimez tous les poids de police que vous n’avez pas besoin d’utiliser sur votre site : il ne sert à rien de téléverser des fichiers que vous n’utilisez pas.

Pour utiliser sur votre site Web, les fichiers devront être au format.woff. Si ce n’est pas le cas (ils ne le seront pas si vous les avez obtenus à partir des polices Google), vous pouvez utiliser un service comme Convertio pour les convertir.

Téléverser les Polices sur Votre Thème

Téléversez maintenant le(s) fichier(s) de police sur votre thème, dans wp-content/themes/nomdutheme, où nomdutheme est le dossier de votre thème. C’est une bonne idée de mettre tous les fichiers de polices dans leur propre dossier dans le thème, par exemple, un dossier polices ou fonts.

Si vous travaillez avec un thème tiers, créez un thème enfant pour vos fichiers de polices et votre feuille de style.

Une fois que vous aurez fait cela, vous devrez ajouter la police à votre feuille de style.

Ajout des Polices en CSS

Ouvrez la feuille de style de votre thème.

Ajoutez du code comme ceci, en remplaçant les polices que j’ai utilisées par les vôtres :

@font-face {
 font-family: ‘Raleway';
 src: url( “fonts/Raleway-Medium.ttf”) format(‘woff’); /* medium */
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: ‘Raleway';
 src: url( “fonts/Raleway-Bold.ttf”) format(‘woff’); /* medium */
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: ‘Merriweather';
 src: url( “fonts/Merriweather.ttf”) format(‘woff’); /* medium */
 font-weight: normal;
 font-style: normal;
}

Ajoutez-en d’autres dont vous avez besoin. Notez que si vous voulez utiliser les variations en gras, italiques, etc de votre police, vous devez les déclarer en utilisant @fontface et ensuite spécifier le poids ou le style pour chacun, comme je l’ai fait ci-dessus avec Raleway pour les poids gras et normaux.

Ajoutez maintenant le style de vos éléments, comme vous le feriez lors de l’utilisation de polices Web :

body {
 font-family: 'Raleway', Helvetica, sans-serif;
 src: url( “/fonts/Raleway-Medium.ttf” );
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Vos polices hébergées localement fonctionneront maintenant avec votre thème.

Comment Modifier les Polices dans WordPress

Maintenant, vous savez comment installer les polices dans votre site WordPress de deux façons. Pourquoi ne pas les modifier ? Et si on les changeait ?

Vous pouvez modifier vos polices de l’une des trois façons suivantes : via l’outil de personnalisation, dans l’écran de modification des articles ou des pages, ou en utilisant le CSS.

Examinons chacune de ces options pour changer le style, la couleur et la taille de la police.

Comment Changer les Styles de Police dans WordPress

Voyons comment nous pouvons le faire si vous utilisez l’éditeur de blocs ou l’éditeur classique.

Changer les Styles de Police dans L’éditeur de Bloc (Gutenberg)

Si vous utilisez une version récente de WordPress avec l’éditeur Gutenberg, vous pouvez changer le style de votre texte lorsque vous le modifiez dans votre article ou votre page.

Sélectionnez le bloc que vous voulez modifier et un menu de style apparaîtra au-dessus.

Sélectionnez le texte que vous voulez modifier, puis cliquez sur les icônes pour le mettre en gras ou en italique. Si vous cliquez sur la flèche à côté de ceux-ci, vous verrez que vous pouvez également sélectionner le style barré.

Modification des Styles de Police dans L’éditeur Classique

Si vous utilisez une ancienne version de WordPress ou si vous avez l’extension Classic Editor installée, vous pouvez également modifier les styles de polices. (Si vous ne voulez pas de l’éditeur Gutenberg, il est préférable de mettre à jour WordPress et de désactiver Gutenberg.)

L’éditeur classique comprend une barre d’outils au-dessus du volet d’édition principal où vous pouvez modifier les styles de votre texte. Si vous cliquez sur l’icône Basculer de la barre d’outils à sa droite, vous pouvez accéder à d’autres options, y compris le texte barré.

Changer les Styles de Police dans la Personnalisation

Si vous souhaitez modifier le style de police d’un élément spécifique, vous pouvez le faire en ajoutant un CSS manuel dans l’outil de personnalisation.

Ouvrez la personnalisation et cliquez sur CSS supplémentaire. Cela ouvrira un écran dans lequel vous pourrez saisir le CSS.

Vous pouvez maintenant saisir le CSS pour vos polices dans la boîte de dialogue. Donc si vous vouliez changer tous les éléments h1 et h2 en italiques, vous ajouteriez ce CSS :

h1, h2 {
 font-style: italics;
}

Changer les Styles de Police dans Votre Feuille de Style

Si vous êtes à l’aise d’ajouter du code à votre feuille de style, c’est une meilleure façon de le faire.

Si vous utilisez un thème tiers, créer un thème enfant pour votre propre style, sinon tous les changements que vous ferez seront perdus lorsque vous mettrez à jour le thème. Vous devrez créer une feuille de style dans le thème enfant pour indiquer à WordPress qu’il s’agit d’un thème enfant : c’est là que vous mettez votre nouveau style de police.

Si vous utilisez votre propre thème, vous pouvez modifier le CSS dans votre propre feuille de style. Le fichier est style.css et vous le trouverez dans votre dossier thème dans wp-content/themes.

Ajoutez n’importe quel style de police à la fin de votre feuille de style pour qu’il ne soit pas annulé par quelque chose de déjà présent. Ou mieux encore, supprimez et remplacez tout style de police existant, à moins que vous ne souhaitiez le conserver.

Modifier le poids d’un élément avec un poids de police :

span.featured {
 font-weight = bold;
}

Modifier le style d’un élément à l’aide du style de police :

span.featured {
 font-style = italic;
}

Modifiez l’alignement avec text-alignment :

span.featured {
 text-alignment: center;
}

Comment Changer les Couleurs de Police dans WordPress

Un autre changement que vous pourriez vouloir faire est de changer la couleur de certains textes de votre site. Attention à ne pas exagérer : votre thème a été conçu avec des couleurs qui vont bien ensemble et si vous ajoutez trop de couleurs, il pourrait avoir l’air criard et non professionnel.

Changer les Couleurs de Police dans Gutenberg

Les blocs de texte Gutenberg vous permettent de modifier la couleur du texte et l’arrière-plan. Pour ce faire, ouvrez le bloc que vous voulez modifier et cliquez sur l’onglet Réglages de couleur dans la section Bloc à droite de l’écran.

De là, vous pouvez modifier la couleur d’arrière-plan et la couleur du texte pour les blocs de texte.

Notez que WordPress vous avertira si la combinaison des couleurs que vous utilisez est mauvaise pour l’accessibilité, comme dans l’exemple que j’ai utilisé ci-dessus. Évitez la tentation d’exagérer avec vos couleurs. Après tout, vous avez choisi votre thème parce que sa conception de couleur était appropriée pour votre site, et l’ajout de beaucoup plus de couleurs pourrait le rendre criard.

Si vous cliquez sur l’onglet Avancé sous l’onglet Réglages de couleur, vous pouvez également ajouter une classe à ce bloc, que vous pouvez ensuite styliser dans l’outil de personnalisation ou votre feuille de style. Ainsi, par exemple, si vous avez ajouté une classe .featured à votre bloc, vous pouvez alors la styliser en utilisant cette classe.

Modification des Couleurs de Police dans L’éditeur Classique

La barre d’outils de l’éditeur classique vous permet de changer la couleur du texte que vous sélectionnez. Ainsi, vous pouvez sélectionner un mot individuel et changer sa couleur. Ci-dessous, j’ai fait une phrase en rouge.

Bien que cela vous donne, en théorie, beaucoup de flexibilité, prenez garde d’en abuser. Si vous commencez à ajouter beaucoup plus de couleurs à votre texte, il pourrait en résulter un site qui est difficile à lire et mauvais pour l’accessibilité.

Modification des Couleurs de Police dans la Personnalisation

Si votre thème inclut des options pour changer le schéma de couleurs de votre site, c’est le meilleur endroit pour le faire.

Par exemple, dans le site ci-dessous, j’utilise un thème qui me permet de choisir un nouveau schéma de couleurs pour l’ensemble du thème. Cela permet de s’assurer que les nouvelles couleurs fonctionnent bien ensemble et qu’elles sont cohérentes.

Les options varient en fonction de votre thème – certains thèmes vous permettent de cibler des titres, des liens et d’autres éléments et de changer leur couleur.

Si vous voulez cibler des éléments spécifiques pour changer leur couleur mais que ce n’est pas une option avec votre thème, vous pouvez ajouter du CSS dans l’outil de personnalisation pour le faire.

Sélectionnez Personnaliser > CSS supplémentaire et saisissez votre CSS dans la zone de texte.

Par exemple, si vous voulez changer la couleur de vos titres h1, saisissez ceci :

h1 {
 color: #564534;
}

Si cela ne fonctionne pas, vous devrez peut-être ajouter des CSS plus spécifiques. Dans mon thème, la couleur du lien de titre du site est codée à l’aide de l’ID #site-title, j’ai donc besoin d’ajouter ce CSS :

#site-title a {
 color: #564534;
}

Remplacez la couleur que j’ai utilisée ci-dessus par votre propre couleur.

Lorsque vous êtes satisfait de vos changements, cliquez sur le bouton Publier.

Changer les Couleurs de Police dans Votre Feuille de Style

Comme pour les styles de police, vous pouvez également modifier la feuille de style de votre thème (ou créer un thème enfant) pour changer les couleurs de police.

Changez la couleur avec la couleur. Ci-dessous, je change la couleur principale du texte de mon site, en utilisant l’élément body :

body {
 color = #222222;
}

Assurez-vous de remplacer tout style existant pour les mêmes éléments et que vous stylisez également tous les éléments qui héritent de ce style si vous voulez qu’ils aient une couleur différente. Tout texte héritera de la couleur de l’élément de corps à moins qu’il n’ait son propre style.

Modification des Tailles de Police dans WordPress

Pour des raisons d’accessibilité, vous pouvez décider que vous voulez que vos polices soient plus grandes que celles de votre thème par défaut. Vous pouvez aussi décider que les titres de vos widgets sont trop petits, par exemple.

Changer la Taille de Police dans Gutenberg

Avec l’éditeur Gutenberg, vous pouvez modifier la taille du texte dans chaque bloc.

Sélectionnez le bloc, puis cliquez sur l’onglet Réglages de texte dans le menu Blocs à droite de l’écran. Vous pouvez rendre le texte du bloc plus petit ou plus grand, comme indiqué ci-dessous.

Attention, si tous les paragraphes de votre page sont de tailles différentes, ils auront l’air incohérents et difficiles à lire.

Changer la Taille de Police dans L’éditeur Classique

L’éditeur classique ne vous donne pas la possibilité de sélectionner un texte spécifique et de changer sa taille : donc si vous avez besoin de cette fonctionnalité, vous devrez passer à Gutenberg. Désolé !

Changer la Taille de Police dans L’outil de Personnalisation

En fonction de votre thème, vous avez la possibilité de modifier la taille des polices dans la personnalisation, soit en modifiant la taille des polices pour l’ensemble du site, soit en ciblant les en-têtes et le corps du texte.

Si votre thème n’inclut pas d’option de personnalisation pour changer la taille des polices, vous pouvez utiliser l’option CSS supplémentaire. Allez dans Personnaliser > CSS supplémentaire et saisissez le CSS dans la case.

Ci-dessous, je fais les titres dans les zones de widgets plus grands, avec ce CSS :

h2.widget-title {
 font-size: 3em;
}

C’est peut-être un peu trop gros, mais ça vous donne une idée générale.

Changer la Taille de Police dans Votre Feuille de Style

Modifier la taille des polices de votre feuille de style fonctionne de la même manière que modifier n’importe quel autre style pour vos polices.

Si vous voulez changer la taille de tout le texte de votre site, vous devez utiliser l’élément body :

body {
 font-size: 14px;
}

Pour l’élément body, vous utilisez des pixels, mais pour les autres éléments, vous utilisez em donc la taille est relative à la taille de l’élément body.

h1,
#site-title {
 font-size: 2em;
}

Rappelez-vous que si vous voulez apporter des modifications aux polices de votre feuille de style de thème, testez-la d’abord sur un site de développement afin que vous ne couriez pas le risque de ruiner votre site en production.

Comment Optimiser les Polices dans WordPress

Que vous utilisiez des polices Web ou des polices hébergées localement, il est logique de faire tout votre possible pour optimiser vos polices.

Je vais vous donner ici quelques conseils pour optimiser vos polices, à la fois pour la vitesse et pour le design.

Optimisation des Polices pour la Performance

Si vous utilisez des polices Web sur votre site, vous voudrez faire tout ce qui est en votre pouvoir pour vous assurer qu’elles sont affichées sur vos pages le plus rapidement possible et que leur hébergement externe ne ralentit pas les choses.

• Utilisez la mise en cache pour vous assurer que les pages n’ont pas besoin d’être reconstruites chaque fois qu’elles sont chargées. Les offres d’hébergement Kinsta sont livrés avec une mise en cache intégrée.
• Utilisez un fournisseur de polices Web qui fournit des polices à l’aide d’un réseau de diffusion de contenu ou CDN. Google Fonts fait cela et accélère la livraison des polices.
• N’utilisez que les polices dont vous avez besoin. Ne mettez pas en file d’attente les variations de polices (poids, styles) que vous n’utiliserez pas dans votre feuille de style. Si vous trouvez que vous en avez besoin plus tard, vous pouvez toujours les ajouter à ce moment-là.
• Si vous utilisez des polices Web, assurez-vous de les mettre en file d’attente correctement. N’utilisez pas de ligne @import dans votre feuille de style, même si c’est ce que votre fournisseur de polices Web vous dit de faire.
• Lors de l’ajout manuel de CSS, ajoutez-le à la feuille de style de votre thème et non à la section <head> de votre fichier header.php. C’est une des raisons pour lesquelles il est préférable de coder le CSS manuellement dans votre thème plutôt que d’utiliser la personnalisation ou un bloc, car les deux vont ajouter du CSS en ligne à la page au lieu de l’ajouter à la feuille de style.
• Envisagez d’utiliser le CSS en ligne (inlining) pour réduire de quelques millisecondes le temps de chargement des pages. Il s’agit d’un processus qui utilise l’encodage base64 pour ajouter du CSS de votre feuille de style dans la page avant de la charger, ce qui évite au navigateur d’avoir à charger des fichiers supplémentaires. Cela peut sembler contre-intuitif étant donné les conseils ci-dessus sur la façon de ne pas écrire de CSS en ligne, mais cela fonctionne toujours à partir d’un fichier CSS séparé et ne signifie pas coder manuellement en CSS en ligne. Si vous chargez plusieurs polices, l’inlining peut accélérer un peu votre site.
• Utilisez la minification pour réduire la taille de votre feuille de style. Vous pouvez facilement le faire si vous êtes un client Kinsta en profitant de la fonction de minification du code située directement dans le tableau de bord MyKinsta. Cela permet aux clients d’activer la minification automatique de CSS et JavaScript d’un simple clic, accélérant ainsi leurs sites sans aucun effort manuel.
• Si vous hébergez des polices localement, téléversez uniquement les fichiers pour les polices et les poids et styles de polices dont vous avez besoin. Ajoutez seulement les variations dont vous avez besoin en utilisant la déclaration @font-face.
• Envisagez d’utiliser un CDN pour héberger vos propres polices au lieu de les héberger sur votre propre serveur.
• Lorsque vous hébergez vos propres polices, incluez des formats supplémentaires : woff2, woff, ttf, et eot. Les navigateurs peuvent alors sélectionner la version qui se chargera le plus rapidement.
• Si vous utilisez une police différente pour le titre de votre site, mettez en file d’attente uniquement les caractères dont vous avez besoin au lieu de la bibliothèque de polices complète.

Donc, si le titre de votre site est Kinsta, vous pourriez faire une petite amélioration de performance en suivant la feuille de style comme ceci :

function kinsta_add_title_font() {
 wp_register_style( 'googleFonts', ‘https://fonts.googleapis.com/css?family=Raleway&text=“kinsta');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );

Optimisation des Polices pour le Design

En plus d’optimiser les performances de vos polices, il est également important de s’assurer qu’elles sont visuellement optimisées : qu’elles s’intègrent bien dans le design de votre site et dans vos matériaux hors ligne.

C’est particulièrement le cas si vous utilisez une extension ou un thème enfant pour ajouter des polices supplémentaires en plus de celles déjà fournies avec votre thème. Il y a un risque que votre thème ait l’air désordonné s’il y a trop de polices dans trop de couleurs et de styles.

Avant d’ajouter des polices supplémentaires à votre site, pensez à ce qui suit :

• Les nouvelles polices sont-elles cohérentes avec vos polices existantes ? Ont-elles un style ou une ambiance similaire ?
• Si vous avez besoin de faire correspondre une police qui a été utilisée pour des documents imprimés mais ne pouvez pas utiliser la même police qu’une police Web, essayez de trouver une correspondance aussi proche que possible sur Google Fonts.
• Les polices que vous avez choisies sont-elles compatibles avec votre marque ? Si vous dirigez une entreprise sérieuse, vous ne voulez pas utiliser Comic Sans (en fait, quel que soit le type de site Web que vous dirigez, vous ne voulez pas utiliser Comic Sans).
• Si vous changez les couleurs de vos polices, essayez d’utiliser des couleurs qui sont déjà dans le design de votre thème ou qui sont coordonnées avec elles. Ajouter trop de couleurs donnera à votre site un aspect criard et non professionnel.
• Si vous essayez de choisir une paire de polices sur Google Fonts, essayez d’utiliser un service comme pour en trouver deux qui fonctionnent bien ensemble.

Les polices que vous utilisez dans votre design auront un impact sur l’impression que les visiteurs auront quand ils arriveront sur votre site. Assurez-vous d’avoir pris en compte ces éléments et d’avoir choisi des polices qui renforceront votre marque.

Utilisation des Polices de Caractères Variables

Les polices variables sont un nouveau type de polices qui rendent l’ajout de plus de polices à votre site plus efficace.

Ils permettent de stocker plus d’informations dans un seul fichier de polices, de sorte que si vous voulez des variations sur votre police (gras, italique, etc.), vous n’avez pas besoin de charger plusieurs fichiers de polices, mais vous pouvez simplement charger celui-là.

Pour une police avec plusieurs poids, styles et inclinaisons, cela peut permettre d’économiser beaucoup d’espace de fichier et faciliter le processus de recherche de la police ou de son ajout via @fontface.

Les polices variables sont prises en charge dans les dernières versions de Chrome, Edge, Firefox et Safari, mais pas par les anciens navigateurs ; si vous les utilisez, vous aurez donc besoin d’une solution de secours. Et il n’y a pas encore beaucoup de polices variables disponibles. Google Fonts n’en inclut pas, mais Google prend en charge la spécification, il est donc probable qu’elles seront ajoutées au fil du temps.

Les développeurs de polices travaillent sur créer plus de polices variables et améliorer leur fiabilité, il vaut donc la peine de suivre l’évolution afin que vous puissiez utiliser des polices variables pour optimiser vos polices une fois qu’elles seront plus stables.

Résumé

Changer les polices de caractères sur votre site WordPress n’est pas une tâche facile. Vous avez le choix entre différentes possibilités :

1. Utiliser les polices web en installant une extension.
2. Utiliser des polices web en les codant dans votre thème et en les mettant en file d’attente.
3. Héberger vos polices.

Ensuite, vous devriez vous concentrer sur la façon d’optimiser vos polices pour de meilleures performances. Si vous suivez les conseils de ce guide, vous devriez pouvoir non seulement changer les polices dans WordPress, mais aussi avoir plus de contrôle sur elles dans votre thème.

Vous voulez désencombrer la mise en page de votre page ou de votre blog pour que vos lecteurs se concentrent sur votre contenu ? Alors, lisez ceci : Comment supprimer la colonne latérale dans WordPress (4 méthodes).