L'API des polices Wordpress : Comment utiliser l'API des polices Wordpress ?

Comment utiliser l'API des polices web de WordPress - expliqué simplement

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

Entre autres, l'API WordPress Web Fonts te permet d'ajouter de manière dynamique des polices personnalisées à tes thèmes WordPress et de gagner ainsi plus de contrôle sur le texte de ton site WordPress. 

Qu'est-ce qu'une API ?

Une interface est appelée Application Programming Interface (API). Cela signifie que tu fais communiquer des programmes entre eux afin qu'ils puissent échanger des données entre eux de manière limitée et contrôlée.

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 avancé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 12.8 de Gutenberg 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 la 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 (et la meilleure protection des données) possible aux utilisateurs finaux.

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Pourquoi une Core API 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 de créer 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 devaient également pouvoir définir dans Gutenberg quelles polices devaient être utilisées sur le site. Le fait qu'il s'agisse d'une API permet à d'autres applications ou parties d'applications de récupérer les données de l'API WordPress Web Fonts.

Un scénario d'application : 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 web.

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

La mise en place d'une API Web Fonts dans WordPress a été un véritable parcours du combattant pour les développeurs. Après avoir été supprimée de WordPress 5.9, elle a été déplacée vers le projet Gutenberg , où elle a pu être développée en même temps que les fonctions connexes qui en dépendaient.

Cela signifie que tu peux utiliser et régler 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 des polices web de WordPress ? 

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 - ce qui est très difficile à faire sans un tel framework.

L'API WordPress Web Fonts permet aux développeurs de thèmes de définir quelles familles de polices doivent être utilisées avec les fichiers correspondants dans WordPress. WordPress charge automatiquement les polices avec le CSS approprié dans l'éditeur et le frontend. 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 uniforme.

La fonction Web Font API fait office de wrapper pour l'API Stylesheet. En effet, pour mettre une police web en file d'attente, le fichier de police lui-même doit être mis en file d'attente en plaçant la feuille de style dans la file d'attente (ou en ajoutant un style en ligne). 

Dans un premier temps, tu ne pourras utiliser que des polices locales. Dans le futur, l'équipe WordPress ajoutera certainement le support pour d'autres fournisseurs de polices. 

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

Citation de GitHub

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

Comment utiliser l'API des polices web de WordPress 

Voyons à présent comment 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 pour la plupart à 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. Il contient le nom de la police, l'URL du fichier de police ainsi que le poids et le style de la police.  

Nous allons maintenant voir comment tu peux modifier les polices de caractères à l'aide du fichier theme.json. Pour ce faire, tu dois te connecter à ton site WordPress via SFTP. Tu peux ainsi accéder aux fichiers de ton site web. Utilise le client FTP de ton choix. (Note que Raidboxes ne supporte que 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 vois un dossier appelé "disk". Clique dessus. 

Api de polices web Wordpress

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" s'affiche 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 dans lequel tous les thèmes WordPress installés sont classé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  

Api de polices web Wordpress

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 polices spéciale.  

}, 

“typography”: { 

"customFontSize" : true, 

"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. 

Api de polices web Wordpress

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.  

Api de polices web Wordpress

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). En savoir plus sur les polices de caractères ici.  

Exemples d'utilisation 

L'API WordPress Web Fonts pour la dernière version de WordPress permet aux développeurs de spécifier les polices à utiliser dans l'éditeur de thèmes. Imaginez qu'un développeur ou une développeuse souhaite utiliser une combinaison de polices selon les souhaits du client.

Il est alors 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 le développeur ou le designer web que tu es. 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 simples et efficaces. 

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

Tes questions sur l'API des polices web de WordPress

Quelles questions poses-tu à Noel ? N'hésite pas à utiliser la fonction de commentaire. Tu veux être informé(e) des nouveaux articles sur le marketing en ligne ? Alors suis-nous sur Twitter, Facebook, LinkedIn ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.