WordPress a longtemps été sur la voie d'une véritable API de polices Web - elle est arrivée avec la sortie de Gutenberg 12.8 le 16 mars 2022. Apprends comment utiliser l'API WordPress Web Fonts et ce qui va enfin changer grâce à l'API Web Fonts.

Entre autres, avec l'API WordPress Web Fonts, tu ajoutes dynamiquement des polices personnalisées à tes thèmes WordPress et tu gagnes ainsi plus de contrôle sur le texte de ton site WordPress. 

Qu'est-ce que la nouvelle API WordPress Web Fonts ? 

En septembre 2021, une proposition du développeur WordPress Ari Stathopoulos concernant une API Web Fonts a été discutée au sein de la communauté. Avec L'API WordPress Web Fonts est une grande percée pour toi en tant que développeur Web:in ou designer:in. L'API WordPress Web Fonts te permet d'intégrer des polices de caractères dans tes sites WordPress sans avoir à te soucier de la règle font-face ou de la Cross Domain Policy.  

L'API WordPress Web Fonts a été intégrée dans la nouvelle version Gutenberg 12.8 et devrait arriver dans le Core avec WordPress 6.0. "Le fait qu'il nous ait fallu autant de temps pour en arriver là est une preuve de la complexité des polices web" - comme l'explique Héctor Prieto dans le billet de blog officiel de Gutenberg 12.8 sur WordPress.org.

Maintenant que ce cadre existe, d'autres outils et optimisations peuvent être mis en place pour garantir que WordPress offre la meilleure expérience possible (et la meilleure protection des données) aux utilisateurs finaux.

Pourquoi une API de base est-elle nécessaire ? 

Les standards permettent une implémentation routinière des polices de caractères. Il s'agit d'un standard, de sorte que chaque développeur peut regarder quelques lignes de code et comprendre ce que fait le code.L'implémentation d'une API permet d'avoir une base stable pour les développements futurs.  

Le projet Gutenberg

L'éditeur Gutenberg a été développé. En plus de la possibilité d'utiliser des styles globaux, les développeurs de Gutenberg devaient également pouvoir définir quelles polices devaient être utilisées sur la page. Grâce au fait qu'il s'agit d'une API, d'autres applications ou des parties de la même application peuvent également récupérer les données de l'API WordPress Web Fonts.

Un scénario d'utilisation : tu as demandé à un développeur de créer une bannière de cookie personnalisée. Sur ton site WordPress, tu utilises l'API WordPress Web Fonts pour indiquer quelles polices doivent être utilisées. Le développeur peut utiliser les mêmes polices web que celles utilisées sur l'autre site.

Tu peux utiliser la même API pour gérer les polices de ton site. Tu n'as pas besoin de gérer les paramètres à plusieurs endroits. Il convient de mentionner que la première version n'est qu'une base sur laquelle l'équipe WordPress va s'appuyer.

Le chemin vers l'API des polices web dans WordPress a été une montagne russe pour les développeurs. Après avoir été supprimée de WordPress 5.9, elle a été déplacée dans le projet Gutenberg , où elle a pu être développée avec les fonctions connexes qui en dépendaient.

Cela signifie que tu peux utiliser et ajuster tes polices à partir du même endroit et que les modifications sont synchronisées avec tous les endroits où tu utilises l'API WordPress Web Fonts. Il convient de mentionner que la première version n'est qu'une base sur laquelle l'équipe WordPress continuera à construire. 

Dans cet article, nous te montrons comment utiliser l'API WordPress Web Fonts, de l'installation à l'ajout de polices à l'API. Commençons.  

Que fait l'API WordPress Web Fonts ? 

Cette API est la première étape pour permettre le chargement des polices d'une manière puissante, respectueuse de la vie privée et à l'épreuve du temps - quelque chose de très difficile à faire sans un tel framework.

Avec l'API WordPress Web Fonts, les développeurs de thèmes peuvent définir quelles familles de polices doivent être utilisées dans WordPress avec les fichiers correspondants. WordPress charge automatiquement les polices avec le CSS approprié dans l'éditeur et le front-end. Dans la première version de l'API WordPress Web Fonts, les scripts et les styles sont mis en file d'attente. La raison en est la nécessité d'une solution cohérente.

La fonction Web Font API fonctionne comme un wrapper pour l'API Stylesheet. En effet, pour mettre une police web en file d'attente, il faut mettre le fichier de police lui-même en file d'attente en mettant la feuille de style en file d'attente (ou en ajoutant un style en ligne). 

Au début, tu ne peux utiliser que des polices locales. A l'avenir, l'équipe WordPress ajoutera certainement le support pour d'autres fournisseurs de polices. 

Au lieu de les supprimer, nous pourrions peut-être les implémenter correctement et forcer les polices web hébergées localement pour améliorer les performances et la confidentialité ? De cette façon, nous montrerions l'exemple et verrions une nette amélioration des performances et de la protection des données dans l'écosystème WordPress, car les thèmes et les plugins qui utilisent actuellement les polices Google, Adobe, etc. adopteront l'API. 

Citation de GitHub

Il peut y avoir des problèmes de performance lorsque les téléchargements de thèmes sont plus importants si seules les polices locales sont prises en charge. Mais pour de nombreux thèmes, cela ne devrait pas être un problème - un, deux ou trois paquets de polices devraient suffire pour la plupart des thèmes. Mais si les variations de style globales deviennent populaires, nous pourrions voir des thèmes qui proposent de nombreuses polices pour couvrir plusieurs designs prédéfinis.  

Comment utiliser l'API WordPress Web Fonts 

Jetons maintenant un coup d'œil sur la façon dont la nouvelle API WordPress Web Fonts peut être utilisée dans la pratique. 

Il existe deux méthodes pour enregistrer les polices web sur WordPress : via ton fichier "theme.json", ce qui est la norme depuis WordPress 5.8, ou via la méthode @font-face. Les clés et les valeurs de theme.json correspondent en grande partie à la règle CSS @font-face. Si tu ne les connais pas, tu devrais rafraîchir tes connaissances. La règle @font-face est un style CSS qui te permet de définir la police de caractères que tu souhaites utiliser sur ton site.

Tu peux soit utiliser une police déjà installée sur l'ordinateur de l'utilisateur, soit charger une police depuis un serveur distant. Le fichier theme.json contient la liste des polices que tu souhaites utiliser sur ton site. Elle contient le nom de la police, l'URL du fichier de la police ainsi que le poids et le style de la police.  

Nous allons maintenant voir comment tu peux changer les polices de caractères à l'aide du fichier theme.json. Pour cela, tu dois te connecter à ton site WordPress via SFTP. Tu peux ainsi accéder aux fichiers de ton site. Utilise le client FTP de ton choix. (Note que Raidboxes ne supporte que le SFTP et pas le FTP non crypté). J'utilise Termius.  

Une fois que tu t'es connecté à ton serveur et que tu te trouves dans le dossier d'accueil, tu verras un dossier appelé "disk". Clique dessus. 

Dans le dossier "disk", il y a deux dossiers (cela peut être différent dans certains cas), mais tu devrais cliquer sur le dossier "WordPress". Sous le dossier "WordPress", tu verras la bibliothèque habituelle de WordPress avec des fichiers. Clique sur le dossier "wp-content" et sous ce dossier, sur le dossier "themes".

Nous nous trouvons maintenant dans le dossier où sont placés tous les thèmes WordPress installés. Je clique sur twentytwentytwo à des fins de démonstration. Sur l'image, tu vois le fichier que tu dois télécharger sur ton ordinateur pour pouvoir le modifier.  

Après avoir ouvert le fichier "theme.json" avec un éditeur normal ou ton IDE préféré, tu ajoutes les polices web sous settings.typography.fontfamily comme partie d'une définition de famille de police spéciale.  

}, 

„typography“: { 

"customFontSize" : oui, 

"dropCap" : false, 

"fontFamilies" : [ 

{ 

"fontFamily" : "Tenue", "sans-serif", 

"name" : "tenue", 

"slug" : "primaire" 

}, 

{ 

"fontFamily" : "monospace", 

"name" : "monospace", 

"slug" : "monospace 

} 

  

Après avoir ouvert le fichier "theme.json" dans n'importe quel éditeur de texte. 

Tu peux trouver la balise "typography" en parcourant le code. Tu verras alors la balise "fontFamilies", sous laquelle tu inscris les polices que tu souhaites ajouter à ton site WordPress. Sur l'image, tu peux voir des marques rouges. Comme sur l'image ci-dessus.  

Selon le thème que tu utilises, le code peut être différent. Dans un autre exemple, j'utilise le thème standard twentytwentytwo sans aucune modification. Comme tu peux le voir sous le premier "fontfamily", tu vois le code pour System Font Stack (Les polices système et standard sont utilisées sur les ordinateurs et les téléphones portables). Lis ici plus d'informations sur les polices de caractères.  

Exemples d'utilisation 

Avec l'API WordPress Web Fonts pour la dernière version de WordPress, les développeurs:-euses peuvent indiquer quelles polices de caractères doivent être utilisées dans l'éditeur de thèmes. Imagine qu'un(e) développeur(se) souhaite utiliser une combinaison de polices selon les souhaits du client.

Ensuite, il est très facile pour le rédacteur de publier un article. Le rédacteur n'a pas besoin de réfléchir aux combinaisons de polices, elles sont déjà prédéfinies. Cet exemple d'application montre l'idée derrière la Font API. 

Conclusion sur l'API des polices web de WordPress

L'API WordPress Web Fonts est un pas en avant décisif pour toi, développeur web ou designer. En permettant aux développeurs de thèmes de définir des familles de polices et les fichiers correspondants, WordPress se charge de charger les polices dans l'éditeur et sur le front-end. Cela rend le développement et la conception beaucoup plus faciles et efficaces. 

Dans cet article, j'ai décrit comment fonctionne l'API WordPress Web Fonts. As-tu déjà essayé de l'utiliser ? J'aimerais avoir ton avis à ce sujet.