Dans l’un de mes articles précédents sur Comment télécharger des polices Google sans pluginJ’ai reçu une demande dans la section commentaires demandant la meilleure façon d’avoir différentes polices dans le même article WordPress. Peut-être qu’une seule phrase ou un seul paragraphe devrait avoir une police différente! L’auteur a pensé que ce serait une excellente idée pour l’optimisation de la page de destination.
Voici un tutoriel rapide sur la façon dont cela peut être réalisé.
Étape 1: assurez-vous que la police est disponible
Tout d’abord, assurez-vous que la police que vous recherchez est disponible sur votre site Web. Pour plus d’informations sur la façon de procéder, veuillez consulter mon lien Google Fonts ci-dessus. Si vous souhaitez utiliser des polices locales, qui sont déjà disponibles par défaut, vous pouvez ignorer cette étape.
Juste un petit mot. Avec Core Web Vitals de Google agissant comme un signal de classement, vous devez accélérer les choses dès que possible. Ça signifie:
J’ai utilisé les polices google tout le temps jusqu’à ce que je décide de n’utiliser que des polices standard lorsque cela est possible. Moins de maintenance pour mon site et je n’ai pas à me soucier de charger des ressources supplémentaires.
Étape 2: attribuez une nouvelle classe au texte que vous souhaitez mettre en forme
Le nouvel éditeur Gutenberg fait un travail incroyable. Vous pouvez attribuer des classes CSS distinctes à des blocs individuels. C’est parfait pour le style personnalisé – quelque chose comme ça aurait été très compliqué dans l’éditeur WordPress classique. Pour attribuer une classe CSS à votre nouveau texte, sélectionnez le bloc dans l’éditeur et développez la section « Avancé » dans le volet de droite comme indiqué ici:
Dans cet exemple, j’utiliserai ma police Google préférée, Roboto, pour formater un seul paragraphe. J’ai donc utilisé une classe appelée « Style Roboto » dans la zone de texte « Classe (s) CSS supplémentaire (s) ».
Le champ « Ancre HTML » est également idéal pour créer des liens. Une autre fonctionnalité bien pensée sur Gutenberg!
Étape 3: utilisez un bloc HTML personnalisé pour coller le CSS
Gutenberg est livré avec un excellent bloc flexible appelé « HTML personnalisé » que j’utilise tout le temps. Des extraits de code JSON aux extraits de code JavaScript en passant par la conception personnalisée, c’est une boîte à outils aux fonctionnalités illimitées. Nous allons l’utiliser ici pour insérer nos styles de paragraphe.
Je choisis donc le bloc HTML personnalisé et je colle le code suivant:
<style>
.roboto-style {
font-family: 'Roboto Slab', serif;
}
</style>
Comme ça:
Vous avez terminé! Maintenant, prévisualisez simplement le message et vous devriez voir que le paragraphe avec la classe Roboto Style est maintenant une police différente de celle du paragraphe suivant en dessous:
Si vous souhaitez utiliser la même police pour plusieurs paragraphes, attribuez simplement la même classe CSS là où vous souhaitez l’afficher. C’est facile!
Changer la police dans le message
Si vous souhaitez changer la police dans un seul article WordPress ou une seule page WordPress au lieu de quelques paragraphes, procédez comme décrit ci-dessus, mais utilisez la classe CSS et spécifiez l’élément « p » à la place. Comme ça:
<style>
p {
font-family: 'Roboto Slab', serif;
}
</style>
C’est aussi simple que cela. Désormais, tous les paragraphes de l’article ont la même police. J’utilise cette technique pour faire beaucoup plus que des talons de style. J’ai eu beaucoup de succès en l’utilisant pour le style de tableau (les styles de tableau par défaut dans WordPress sont plutôt mauvais). Mais comme vous pouvez le voir, cela fonctionne parfaitement pour quelque chose d’aussi simple que de changer le style de police!
Je suis membre de l’équipe NameHero et expert en WordPress et en hébergement Web. Je suis dans cette industrie depuis 2008. J’ai également développé des applications pour Android et rédigé de nombreux tutoriels sur la gestion des serveurs Linux. Vous pouvez Contactez moi sur mon site Web WP-Tweaks.com!
