La technologie d’utilisation des polices de caractères Web remonte aux années 90, mais leur utilisation n’est devenue courante qu’en 2010. Avant cela, il était possible de changer la police dans WordPress, mais c’était une tâche compliquée et difficile, et tous les navigateurs ne coopéraient pas.

Vous pouvez désormais utiliser des polices personnalisées dans WordPress et même extraire des polices web du même serveur que celui sur lequel votre site vit. Mais l’utilisation la plus courante des polices web est de les appeler à partir de la source, qui est généralement Google ou Adobe.

Dans ce tutoriel, je vais parler des Google Fonts, puisque leur utilisation est gratuite et qu’ils proposent des centaines de polices géniales parmi lesquelles choisir. Beaucoup de gens ajoutent des Google Fonts manuellement, et vous pouvez certainement le faire. Vous n’avez pas besoin d’un plugin pour faire le travail.

Pour changer la police dans WordPress, il suffit d’aller dans Google Fonts et de sélectionner la police ainsi que les styles et les jeux de caractères que vous pensez pouvoir utiliser, d’éditer le fichier functions.php pour “enqueue” (hein ?) les feuilles de style avec wp_enqueue_style, de référencer les polices dans le fichier CSS de votre thème, etc.

Si les techniques manuelles d’utilisation des polices Web sont viables, pourquoi passer par tout cela ? Le moyen le plus simple de contrôler la taille (ainsi que la couleur et la décoration) des polices WordPress est le plugin Easy Google Fonts.

La possibilité de changer de police dans WordPress sans avoir à modifier manuellement un seul fichier ? C’est le rêve d’un modificateur de thème devenu réalité.

Je suis fan de tout ce qui facilite la gestion d’un site web, et je suppose que vous l’êtes aussi. Prenons donc le plugin pour faire un tour et voyons ce qu’il va faire.

Installation du plug-in Easy Google Fonts

Connectez-vous à votre panneau d’administration WordPress.

Dans la colonne de navigation de gauche, passez la souris sur le lien “Plugins” et cliquez sur le lien “Add New”.

Dans la case “Plugins de recherche…”, entrez “Easy Google Fonts”.

Une fois que vous avez trouvé le plugin, cliquez sur le bouton “Installer maintenant”.

Lorsque le plugin a été installé, cliquez sur le bouton “Activer”.

Utiliser des polices Google faciles à utiliser pour changer de police dans WordPress

Dans la colonne de navigation de gauche, passez la souris sur le lien “Apparence” et cliquez sur le lien “Personnaliser”.

Cela vous amène à la section de personnalisation de votre thème. Les commandes de Easy Google Fonts se trouvent dans la section “Typographie”.

Nous interrompons ce tutoriel pour un mot sur les polices…

Vous allez voir à quel point il est facile d’utiliser l’une (ou plusieurs) des centaines de polices de caractères web différentes. Mais il est bon de se rappeler que les polices ne sont pas toutes créées de la même façon, simplement parce qu’elles sont faciles à utiliser. Certaines sont mieux adaptées à des utilisations spécifiques que d’autres.

En relation  Comment utiliser MyCrytpoCheckout dans WooCommerce pour les crypto-monnaies.

Si vous êtes allé sur le site de Google Fonts, vous avez peut-être remarqué que les polices sont regroupées en catégories.

Les deux premières catégories, avec et sans serif, sont celles où vous devez chercher le texte principal de votre site. Elles sont lisibles et se traduisent bien en gros blocs de texte. Les catégories Affichage, Ecriture et Monospace sont plus appropriées pour les titres ou les petits bouts de texte que vous souhaitez mettre en évidence ou sur lesquels vous souhaitez attirer l’attention.

Google a publié un excellent article intitulé “Choisir les polices de caractères pour le Web” : A Beginner’s Guide. Il vaut la peine d’être lu lorsque vous souhaitez changer de police dans WordPress, même si vous n’êtes pas un débutant en matière de polices Web.

N’oubliez pas que le but du texte est de communiquer des idées. Ou de vendre des produits, d’éclairer les habitants de la Terre. Quel que soit votre objectif, l’apparence du texte ne doit jamais détourner l’attention du message.

Bon, je vous renvoie maintenant à votre tutoriel habituel.

Utilisation des polices Web dans votre thème WordPress

Cliquez sur le lien “Typographie”.

Cliquez sur le lien “Typographie par défaut”.

Les options de personnalisation varieront en fonction du thème que vous utilisez, mais elles comprendront toujours des “paragraphes” et des “titres 1”, “titres 2”, etc. L’option “Paragraphes” contrôle la plupart des textes du site. Les différentes rubriques sont essentiellement des mini-titres dans l’ensemble de votre contenu.

J’utilise le thème par défaut de WordPress pour cette démonstration, et dans ce thème, le titre du message est h2. Donc, pour changer tous les titres des articles sur le site, je clique sur “Edit Font” sous “Heading 2” et je fais des changements.

Nous entrerons dans les détails des contrôles dans une minute, mais pour montrer à quelle vitesse vous pouvez effectuer un changement, sous “Rubrique 2”, je vais cliquer sur “Famille de polices” et choisir parmi les polices Google dans la liste déroulante.

Vous pouvez voir dans le volet de prévisualisation à quoi ressemblera le changement.

La même chose s’applique à la police des paragraphes. Il suffit de cliquer sur “Paragraphe” et de changer la police.

Lorsque vous êtes satisfait des changements, cliquez sur le bouton “Publier”.

Comme vous l’avez peut-être remarqué, nous avons un petit problème avec le changement de police des paragraphes. Il n’a pas changé la police de la liste dans le message.

Je vais vous montrer comment y remédier, mais d’abord, examinons les options en matière de typographie.

Options de typographie des polices de Google

De nombreuses options sont disponibles lorsque vous cliquez sur le lien “Modifier la police”. Elles sont réparties sur trois onglets, “Styles”, “Apparence” et “Positionnement”. Si vous connaissez votre code HTML et CSS, vous saurez ce que font la plupart de ces options. Mais passons-les quand même en revue.

L’onglet “Styles

  • Scénario/sous-ensemble
  • Ce sont les différentes options de codage de la langue. Pour l’anglais, vous n’avez besoin que de “Latin”, mais dans la plupart des cas, je laisse ce réglage sur “All Subsets”.
  • Famille de polices
  • C’est la partie amusante, où vous choisissez entre les différentes polices de Google. N’oubliez pas que vous pouvez également modifier ce choix pour chaque taille d’en-tête, de sorte que vous pouvez facilement changer la police de l’en-tête dans WordPress avec ce paramètre.
  • Poids et style de la police
  • Contrôle de la grasseté de la police et de l’italique.
  • Décoration du texte
  • Souligné, surligné ou barré.
  • Transformation du texte
  • Forcer tout le texte à être en majuscules, minuscules ou en majuscules (ce qui signifie que chaque mot de chaque phrase est en majuscule).
En relation  Comment utiliser une police personnalisée sur votre site Web WordPress.

L’onglet Apparence

  • Couleur de la police
  • Contrôle la couleur de la police WordPress. Vous pouvez entrer une valeur hexadécimale ou choisir une couleur dans un sélecteur de couleurs.
  • Couleur de fond
  • Comme pour la couleur de la police, vous pouvez ici choisir un arrière-plan pour le texte du paragraphe ou de l’en-tête.
  • Taille de la police
  • Définissez la taille de la police en pixels. Ce serait bien si vous pouviez passer à un réglage em. Peut-être qu’un jour ils ajouteront cette option (bonjour, Titanium Themes !).
  • Hauteur de la ligne
  • C’est ici que vous contrôlez l’espace entre les lignes d’un paragraphe. Si vous tirez le curseur vers le haut puis vers le bas, vous pouvez obtenir un réglage légèrement inférieur à “1”, mais sinon, cela ne fera qu’augmenter l’espace. Ce réglage est en valeurs em, et non en pixels.
  • Espacement des lettres
  • Comme pour le contrôle de la hauteur de la ligne, vous pouvez tirer le curseur vers le haut puis vers le bas pour obtenir une valeur négative ici, si vous voulez que vos lettres soient plus proches les unes des autres.

L’onglet “Positionnement

  • Marge
  • Contrôle l’espace autour du texte en ajoutant un espace en dehors de la “boîte” CSS dans laquelle se trouve le texte.
  • Rembourrage
  • Contrôle l’espace autour du texte en ajoutant de l’espace à l’intérieur de la “boîte” CSS du texte.
  • Frontière
  • Crée une bordure autour du texte en contrôlant individuellement les bordures supérieure, droite, inférieure et gauche.
  • Rayon de la frontière
  • Utilisez cette fonction pour arrondir les coins de la (des) frontière(s).
  • Afficher
  • Block ou Inline Block. Si vous n’êtes pas sûr du fonctionnement des blocs d’affichage en CSS, il est préférable de laisser ce contrôle de côté.

Comment changer les polices dans WordPress avec des contrôles de police personnalisés

Vous devez savoir comment vos pages et vos messages sont composés pour profiter des contrôles de police personnalisés. Mais il s’agit surtout de choses de base en HTML, comme une liste non ordonnée ul, une liste ordonnée est ol, les citations en bloc sont blockquote – des choses comme ça.

p

A titre d’exemple, nous utiliserons mon billet d’en haut, où le changement de la police des paragraphes a montré que le changement n’affectait pas la police de la liste. C’est parce que dans le HTML de la page, la liste (ul) apparaît en dehors d’un paragraphe (p). D’autres éléments apparaîtront en dehors des paragraphes, comme les guillemets susmentionnés, etc.

Ainsi, pour faire correspondre le texte de la liste au texte du paragraphe, dans la navigation de la colonne de gauche, passez la souris sur le lien “Paramètres”, et cliquez sur le lien “Polices Google”.

En relation  Comment mettre en place un système de réservation pour les sites d'auberges de jeunesse sur WordPress.

/ul/blockquote/ol/ul

Entrez un “nom de contrôle” (pour cela, j’utiliserai “liste non ordonnée”) et cliquez sur le bouton “Créer un contrôle de police”.

Dans la section “Add CSS Selectors”, entrez la balise HTML (sans les crochets) pour les listes non ordonnées, qui est “ul. Cliquez ensuite sur le bouton “Save Font Control”.

Maintenant, lorsque nous retournons au personnalisateur de thème, vous pouvez voir une nouvelle section Typographie : “Thème Typographie”.

Cliquez dessus et vous verrez les commandes du contrôle des polices personnalisées que nous venons d’ajouter.

Maintenant, si nous modifions le paramètre “Font Family” pour qu’il corresponde à la police du paragraphe, nous avons une belle apparence cohésive.

Conseil du pro : Lorsque vous créez un contrôle de police personnalisé, vous pouvez ajouter plusieurs sélecteurs CSS à un contrôle.

Ainsi, si vous savez que vous voulez que tout le texte de votre site corresponde, vous pouvez charger un seul contrôle avec tous les sélecteurs CSS que votre thème utilise.

Taille du texte WordPress et la marche incessante vers les écrans mobiles

Nous sommes amis, je peux donc être honnête avec vous. J’ai longtemps résisté à l’augmentation de la taille de mes polices, des polices pour le web et des polices normales. Je me suis obstinée à forcer des tailles de pixels dépassées parce que je voulais contrôler l’apparence de mes sites web pour les visiteurs… indépendamment de la façon dont ils choisissaient de les consulter.

Mais forcer la taille des polices sur les petits hublots, comme les téléphones, ne fait que nuire aux sites. Car lorsque les gens ne peuvent pas lire facilement le texte de votre contenu, ils partent vers des pâturages plus faciles à lire.

Ils le devraient aussi.

Depuis un certain temps déjà, l’opinion dominante est que le trafic mobile finira par éclipser le trafic de bureau. Mais en réalité, le trafic mobile semble se maintenir à environ 50 % dans le monde (40 % aux États-Unis).

Ainsi, même s’il n’est pas nécessaire d’adopter une approche “mobile d’abord” pour tout ce qui concerne le web, il est crucial de rendre la taille de la police adaptable à la taille de l’écran de visualisation pour la moitié de votre public. On ne peut donc pas l’ignorer.

Tout cela pour dire qu’il ne faut pas craindre une taille de police plus importante ! Vos utilisateurs de mobiles vous en remercieront.

Ne laissez pas vos polices vous ralentir

Il est amusant de jouer avec différentes polices, et il peut être tentant d’incorporer une demi-douzaine de polices web différentes dans la conception de votre site. N’oubliez pas, cependant, que l’utilisation de polices web augmente le temps de chargement des pages. Si vos fichiers de polices sont volumineux ou si vous utilisez beaucoup de polices différentes sur une page, ils auront un impact négatif sur la vitesse de chargement des pages.

Essayez donc de rester simple avec une police de titre et une police pour tout le reste. Peut-être une police différente pour les citations… vous voyez le genre. Essayez de réduire au minimum l’utilisation de la police Web.

Avez-vous ajouté manuellement des polices de caractères web à votre site ? Considérez-vous que le temps de chargement des pages augmente lorsque vous regardez les polices web ?