Ajouter un champs Google Fonts dans Advanced Custom Fields (ACF)

Ajouter Google Fonts dans Advanced Custom Fields - ACF
WordPress Lecture 4 minutes • 17 avril 2020

S'il y'a bien une extension WordPress dont je ne peux me passer c'est Advanced Custom Fields !
Monument historique et incontournable de la communauté WordPress, il cumule une dizaine d'années d'existence et des millions d'utilisateurs actifs. Merci Elliot, t'es un chic type.
Les remerciements étant faits, je vous partage maintenant mon expérience.
Pour un projet de création de thème sur-mesure, ma cliente me fait la demande de pouvoir choisir librement ses polices d'écriture dans l'administration WordPress. En précisant que faire son choix parmi les Google Fonts serait génial !
Avouons qu'avoir la main sur la police d'écriture des titres et des paragraphes en 2 clics est plutôt hyper pratique.
Bien emballé, je me précipite donc dans l'interface de l'extension ACF (c'est son petit nom) et là oooooh... déception. Il n'existe pas de champs ACF pour les Google Fonts... damned ! 🙄
 
 

ACF: Google Fonts Selector

Je mène mes recherches et découvre alors l'existence de l'extension WordPress ACF: Google Font Selector, créée par Daniel Pataki et qui permet d'ajouter un champs Google Fonts dans Advanced Custom Fields.
Mais voilà, l'extension est abandonnée par son auteur depuis avril 2015 et les commentaires de la communauté sont quasi unanimes : l'extension ne marche plus et provoque des erreurs...
C'est une deuxième douche froide 🙁
 
ACF Google Font Selector pour WordPress
 

Réparation de la solution ACF: Google Fonts Selector

Je retrousse mes manches et part à la résolution des erreurs présentes dans cette extension tout en m'appuyant sur les travaux de debug réalisés par Matiyin sur GitHub.
Résultat : je parviens à une version finale corrigée qui fonctionne parfaitement avec WordPress 5.4 ! 😀
 

Télécharger l'extension corrigée

 
Après avoir téléchargé l'extension corrigée ci-dessus, pensez à l'ajouter à vos extensions WordPress avant de passer à la suite de la configuration.
Choisir Extensions > Ajouter puis cliquer sur le bouton Téléverser une extension.

Activer Web Fonts Developer API

Il est ensuite nécessaire d'activer le service Web Fonts Developer API dans votre compte Google Cloud Platform. Pour cela, on recherche avec les mots-clés "Web Fonts" puis on active le service.
 
Bibliothèque d'API Google Cloud Platform
Rechercher Webfonts dans la bibliothèque d'API Google Cloud Platform
Activer Web Fonts API dans Google Cloud Platform

Créer une clé d'API Google

Il est ensuite nécessaire de créer une clé d'API Google pour faire fonctionner les Google Fonts. Pour cela, rendez-vous dans la section API et services et choisir Créer des identifiants > Clé API
 
Créer une clé API Google Cloud Platform
 
Je vous conseille ensuite d'éditer la clé d'API en cliquant sur le petit crayon. Puis de renseigner les champs suivants :
- Nom : choisir quelque chose d'explicite afin de se souvenir pour quel projet est utilisée cette clé d'API.
- Cocher Référents HTTP (sites Web) pour restreindre l'utilisation de la clé à un usage web.
- Puis préciser l'url de votre site dans Restrictions liées aux sites Web.
- Cocher Restreindre la clé pour restreindre l'utilisation de la clé.
- Puis sélectionner Web Fonts Developer API.
 
Paramétrage et sécurisation clé API Google
 
Copier le champs API Key puis enregistrer.
 
Dernière étape, coller la clé dans votre WordPress. Pour cela, aller dans Réglages > Google Font Selector et y coller la clé d'API.
Tout est en place ! :mrgreen:
Coller la clé d'API dans WordPress Google Font Selector
 

Utiliser le champs ACF: Google Fonts Selector

Ce nouveau champs s'utilise de la même façon que les autres champs ACF. Il faut simplement créer un nouveau champs via le menu ACF, puis choisir Google Font Selector pour le Type de champ.
 
Créer un champs ACF Google Font Selector
 
Le résultat est très satisfaisant, avec un aperçu direct de la police d'écriture sélectionnée et un usage redoutablement simple !
 
Utilisation champs ACF Google Font
 
Pour aller plus loin, vous pouvez également modifier les fichiers de l'extension.
La plupart des éléments intéressants à personnaliser se trouvent dans le fichier acf-google_font_selector-v5.php, ou il est par exemple possible de changer le texte de prévisualisation "Aperçu de la police d'écriture" ou bien y ajouter différents éléments d'aperçu tels qu'on titre, un paragraphe, un bouton ... ligne 137 à 139 du fichier.
 
Cette article vous a dépanné ? Dîtes-le en commentaire, c'est toujours un plaisir de vous lire.
 


Avis clients

Tibow Webdesign

Tous les avis

Charlotte Séjourné - Wildust.com 10 septembre 2021

Google Avis
Thibaut est une personne super disponible et très pro.
Chaque projet confié a été géré avec beaucoup de professionnalisme et pas mal de pédagogie pour les néophytes comme moi! C'est super appréciable.

Maud Rochais Photographe 26 août 2021

Google Avis
Thibault a répondu a mes attentes ! Il est à l'écoute et a su cerner rapidement ce que je voulais en terme de site. Le résultat est parfait ! Merci à toi !

Loïc Perrière 6 janvier 2021

Ingénieur de recherches - CNRS / Recommandation LinkedIn
Lors du démarrage de projet de refonte du site web de mon laboratoire, j’ai contacté Thibaut pour obtenir des renseignements sur un travail qu’il avait déjà réalisé auprès d’un autre client.
Sa franchise et la clarté de ses réponses m’ont finalement convaincu de lui confier la conception de deux sites internet. Nos échanges ont toujours été constructifs, et Thibaut a fait preuve, tout au long du développement, de dynamisme et de réactivité, et a également réalisé de nombreuses propositions qui ont majoritairement été retenues. Enfin, il a su faire preuve d’écoute pour intégrer les problématiques et les demandes spécifiques d’un site internet de laboratoire public pour créer un site à notre image.
La collaboration a été fructueuse et constructive, et ça a été un réel plaisir de travailler avec lui.

Clara Deleuze 21 décembre 2020

Principal Chief Executive Officer chez On Divorce / Recommandation LinkedIn
Je collabore avec Thibault depuis plus de 10 ans.
Plus qu'un dev Full Stack c'est un profil au sens logique qui sera vous accompagner plus globalement sur votre projet IT.
Je lui ai confié plus de 5 projets et vous le recommande vivement : réactivité, sens du détail, proactivité...Il sait s'adapter "au métier" pour lequel il intervient et pas uniquement à la fonctionnalité !

Ackeret Mano 22 février 2019

Google Avis
Nous avons fait appel à Thibaut pour développer le site internet de notre entreprise Ackeret Mano, l'année dernière et nous avons été très satisfaits.

C'est un garçon à l'écoute, disponible et sérieux.
Nous vous le recommandons les yeux fermés.

Frédéric Meyrou 19 octobre 2018

Google Avis
Thibaut a repris en main le site du projet de coopérative supercoop.fr et il a parfaitement compris le style et l'énergie qu'il fallait donner au projet donc le site est un vecteur important de communication. Vous pouvez lui faire confiance!

Patrick Chatenet 24 juin 2018

Google Avis
Nous avons travaillé avec Thibaut Soufflet pour finaliser un site Wordpress fait par une autre personne qui était partie vers d'autres horizons professionnels. Il s'est parfaitement adapté, nous a bien écouté et a proposé de très bonnes solutions en termes d'ergonomie et de facilité d'utilisation pour nos clients. A eu à régler des problèmes techniques et a pris le temps de nous trouver les meilleures solutions. Je le conseille vivement!

Anaelle Sorignet 21 mai 2018

Google Avis
Tibow est super efficace, réactif et à l'écoute ! Il nous a concocté un super site. Je recommande vivement de faire appel à lui.

ISOPROM 15 avril 2018

Google Avis
donne de tres bons conseils

Alexis Supiot 5 septembre 2017

Google Avis
Plusieurs projets avec Thibaut et à chaque fois de bons échanges, une facilité dans la compréhension de nos attentes et pour l'ensemble des résultats très satisfaisants sur le rendu. Je recommande vivement et sais que nous aurons d'autres projets ensemble.
Lire plus