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.
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
- Ma chaîne Youtube @gregoirenoyelle dans laquelle je compte publier beaucoup de tutoriels sur le FSE.
- La première formation intégrale sur le FSE (Editeur de site).
- Nos meetups mensuel WP Paris.
- Notre association parisienne WP Paris (la refonte du site en FSE est en cours).
2 réponses
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.
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.