Créateur de thèmes WordPress :: Formateur :: Web Designer

Intégrer des Polices Variables dans les Thèmes WordPress qui reposent sur des blocs (FSE)

Publié le : 

Modifié le : 

Par : 

Le Full Site Editing (FSE) de WordPress a révolutionné la manière de construire des sites web, en offrant une flexibilité et une personnalisation sans précédent. L’un des aspects les plus passionnants de cette innovation est la possibilité d’intégrer des polices variables dans les thèmes reposant sur des blocs. Dans cet article, nous allons explorer comment ajouter des polices variables à un thème FSE pour un design WordPress sur mesure.

Choisir une Police Variable Google

La première étape consiste à sélectionner une police variable Google adaptée à ton projet. Les polices variables offrent une variété de styles et de poids, te permettant de personnaliser ton site de manière précise. Choisis une police qui correspond à l’identité visuelle de ton site WordPress.

Voir la vidéo de ma playlist YouTube dédiée à l’éditeur de site qui résume tout l’article.

Ajouter des polices variables à ton thème FSE

Rejoins Mes Ateliers Live

Pour aller plus loin et apprendre en temps réel, participe à mes ateliers live WordPress 100% Bloc. C’est une opportunité unique de parfaire tes compétences en WordPress et de poser directement tes questions.

Télécharger et Intégrer la Police dans ton Thème

Une fois ta police choisie, télécharge-la et prépare-toi à l’intégrer dans ton thème FSE. L’extension Create Block Theme peut simplifier ce processus. Ajoute la police en versions italique et normale directement dans ton thème.

Remplacement par les Versions Variables

Le véritable atout des polices variables se révèle lorsque tu remplaces les fichiers standards par leurs versions variables. Ce processus permet une plus grande adaptabilité et une meilleure performance de ton thème FSE. Deux fichiers suffisent pour utiliser toutes les graisses proposées par les options de Style du FSE.

Mise à Jour du Fichier theme.json

La prochaine étape critique est la mise à jour du fichier theme.json de ton thème. Assure-toi de changer le nom des fichiers de police pour correspondre aux versions variables que tu as intégrées, en incluant à la fois les styles italique et normal.

Vérification dans le Back-Office

Finalement, il est essentiel de vérifier que tout fonctionne comme prévu dans le back-office de WordPress. Cette étape te permet de t’assurer que les polices variables sont correctement chargées et affichées dans l’éditeur de site.

L’intégration de polices variables dans les thèmes FSE de WordPress est plus qu’une simple question de style. C’est une avancée vers des thèmes sur mesure plus dynamiques et interactifs, offrant une expérience utilisateur améliorée et une personnalisation accrue. En suivant ces étapes, tu peux transformer significativement l’apparence et la sensation de ton site WordPress, le rendant unique et adapté à tes besoins spécifiques.

Quelques liens

10% de réduction avec le code
GREGOIRE10
Votre site WordPress mérite un hébergement rapide et sécurisé. Comme moi, hébergez votre site sur faaaster.io !

2 réponses

  1. Mathias

    Les polices variables, c’est très sympa. mais si on doit regarder l’intérêt en terme de performance, ça serait mieux de travailler avec les fichiers woff2 plutôt qu’avec les ttf.

    Pour convertir les fichiers ttf non variables, https://www.fontsquirrel.com/tools/webfont-generator est une référence très connue.
    Pour les fichiers ttf variables, j’aime bien https://webfont.yabe.land/en/misc/convert-ttf-woff2/
    Pour tester que le fichier woff2 marche bien, j’aime beaucoup https://wakamaifondue.com/

    C’est vrai que dans le cas de Montserrat, les fichiers variables woff2 pèsent 122 et 128 Ko. Alors que les fichiers statiques woff2 pèsent entre 69 à 89 Ko. Assez vite la police variable est intéressante.
    Mais ça n’est pas le cas de toutes les polices variables. Par exemple, dans le cas d’Inter, les fichiers variables woff2 pèsent 338 et 372 Ko. Alors que les fichiers statiques woff2 pèsent entre 104 à 116 Ko. En utilisant variantes (regular, italic, bold et bold italic), les fichiers statiques pèsent moins lourds.
    Et il me semble qu’il y a des cas où c’est encore plus marqué.

    Conclusion : je ne recommanderais pas systématiquement d’utiliser les polices variables. il faut regarder l’usage qui en est fait.

    1. Salut Mathias,

      Merci pour tous ces liens. J’utilise comme toi les versions woff2 avec l’outil webfont.yabe.land.

      Comme pour l’instant, il n’est pas possible de supprimer des variantes dans le menu déroulant « Apparence » de WordPress, je préfère tout avoir pour ne pas frustrer celui qui choisit sa graisse dans le menu. Et au final, le poids des polices variables optimisées est très raisonnable: dans l’exemple d’Inter que tu donnes, la police variable avec tout pèse 338 Ko et si tu prends seulement 2 fichiers indépendants pèsent déjà 220 Ko.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.