Incorporer localement vos polices de Google Fonts

[daneel]

Avec l'extension libre et gratuite "JT ALDEF" de Joomtools, découvrez le moyen de télécharger et d'installer localement les polices google font sélectionnées dans votre template et de remplacer tous les appels externes vers Google automatiquement sans devoir intervenir dans le code des templates existants !

Fonctionne avec Cassiopeia (template par défaut), la plupart des templates existants, y compris en template enfant et certains frameworks comme helix ultimate.



Extension traduite en français et disponible sur Github :
https://github.com/YGomiero/plg_syst...ses/tag/1.0.14

Le plugin JT ALDEF permet de "scanner" le contenu des pages ainsi que du contenu des fichiers css, de télécharger les polices nécessaires et de remplacer dynamiquement les appels de google font vers des version locales. Une fois installé, il suffit de choisir les bons paramètres et de publier.

Conseils :

• Il est fortement recommandé de placer le plugin en dernier dans l'ordre.
• Après avoir apporté des modifications aux fichiers CSS, il est recommandé de réinitialiser l'index.

N'hésitez pas à tester, utiliser le mode debug (depuis les paramètres du plugin) pour vérifier le fonctionnement.

Installation :

1. Télécharger depuis le lien ci-dessus et cliquer sur plg_system_jtaldef-1.0.14fr.zip
2. Effectuer l'installation depuis l'administration de votre site en utilisant l'installateur de Joomla (système > Installation > extensions > onglet archive à envoyer )
3. Dans système > plugins, rechercher aldef puis editer le plugin, n'oublier pas de l'activer en choisissant "activé" dans le statut avant d'enregistrer vos modifications.
4. Afficher la page en front puis recharger la page affichant les paramètres du plugin afin de voir le nombre de fichiers incorporés localement.

Note : Dans une discussion précédente ( https://forum.joomla.fr/forum/joomla-4-x-aa/gestion-des-templates-design-css-et-bootstrap-aa/2042331-ajouter-et-utiliser-une-police-locale-dans-cassiopeia ) j'ai expliqué notamment l'incorporation de police locale de façon manuelle (avec l'édition du code ) ou utilisant d'autres extensions. L'objectif ici est de laisser la solution et le paramétrage du template tout en éliminant tous les appels front vers google font afin que le site soient en conformité avec le RGPD.

[daneel]

L'avantage du plugin ALDEF, c'est de laisser le choix au webmaster d'utiliser Google Font tout en étant respectueux du RGPD.

Concrètement, l'extension ne touche à aucun fichier du template mais créé une copie locale de toutes les fontes et remplace les liens des fichiers css.
Testé avec succès avec cassiopeia, un template enfant de cassiopeia avec le choix de fontes personnalisés depuis google font et sur helix ultimate.
les variantes de styles sont prises en compte.

Ci-joint capture d'écran d'un site sous helix ultimate et le plugin aldef actif. Au total, il a détecté 15 fichiers qu'il aura stocké localement dans son repertoire media

Pas de ralentissement (le site est sous cache litespeed) et conserve les 100% pour les signaux web essentiels (core web vitals) de Google.

[woluweb]

Très intéressant, daneel !

J'ai ajouté l'info sur

https://slides.woluweb.be/cassiopeia/cassiopeia.html#4-2-4-use-a-plugin-to-have-the-fonts-locally

[herve]

Bonsoir
daneel
Très intéressant. J'ai déjà lu avec attention https://forum.joomla.fr/forum/joomla...ssiopeia/page2 mais bien sûr, j’apprécie un plugin qui automatiserait tout cela, conforme rgpd et qui en plus a d'autres perspectives d'évolution

Néanmoins il y a quelque chose que je n'ai pas compris
A l'étape 4 de l'installation: "Afficher la page en front puis recharger la page affichant les paramètres du plugin afin de voir le nombre de fichiers incorporés localement."

J'ai beau essayé mais je ne suis pas arrivé à mon objectif. Pour information, il s'agirait d’utiliser une police comme Lobster dans l'entête de la page du site et pour les h1.

La 1ère chose, c'est quand je lis "il est recommandé de réinitialiser l'index.", je n'ai pas compris tout de suite puis j'ai utilisé la réindexation du composant "recherche avancée" de joomla. A ce moment là j'ai eu l'affichage de nombre de fichiers traités et indexés =11 fichiers

je n'ai pas vu de police s'afficher. j'ai donc pensé qu'il fallait déjà en utilisé. J'ai sélectionné dans le paramétrage de cassiopea comme Préférence des polices="Roboto + sans " puis j'ai navigué sur le site. j'ai eu l'affichage de nombre de fichiers traités et indexés =10 fichiers !

Cela veut-il dire que ce plugin fonctionne une fois que l'on a des polices qui proviennent de composants ou de notre paramétrage de mes fichiers CSS.
Ce n'est pas une problème en soit, mais je souhaite juste savoir si j'ai bien compris ou si j'ai loupé quelque chose ?


Sinon j'hésite a acheter le plugin mentionné par RobertG qui avait un bug mentionné dans la même discussion. Si celui-ci tient ses promesses (c.a.d si j'ai bien compris de sélectionner des polices distantes, les mettre en local et permettre de les affecter à des éléments, cela m'intéresserait d'avoir un retour d'expériences/comparatif par rapport à ce plugin ?

[daneel]

A l'étape 4 de l'installation: "Afficher la page en front puis recharger la page affichant les paramètres du plugin afin de voir le nombre de fichiers incorporés localement."

J'ai beau essayé mais je ne suis pas arrivé à mon objectif. Pour information, il s'agirait d’utiliser une police comme Lobster dans l'entête de la page du site et pour les h1.

Le plugin ALDEF est libre et gratuit. Il fonctionne très bien avec tous les templates et framework que j'utilise.
Il récupère les fontes choisis d'après les liens vers google font pour les desactiver et lier vers une copie en local.

Il n'a pas besoin de savoir si c'est le template ou des composants... cela n'a pas d'importance.
Ce qu'il ne fait pas, c'est de choisir une fonte car il se contente de gérer ce qui est déjà en place pour traiter localement.
Le plugin a été conçu pour intercepter les appels de google font mais on pourrait aussi le faire pour d'autres services similaires.

exemple 1 : j'ai défini lobster depuis les paramètres de mon template helix. Sans le plugin, j'ai bien google font qui est appelé.
Avec le plugin, je n'ai plus d'appel car il aura copié la fonte en localement et remplacé les liens google.

exemple 2 : j'utilise cassiopeia et j'ai fait un template enfant dans lequel j'ai ajouté un lien vers la police lobster dans googlefont pour les balises titres comme je l'ai déjà expliqué sur des précédentes discussions. Sans le plugin, l'appel fonctionne bien avec google font. Avec le plugin, il desactive le lien et le remplace par une copie en local.

Et je peux continuer ainsi le nombre d'exemple... car peu importe le template. J'ai aussi vérifié avec succès en local et sur serveur.

[herve]

Bonjour
Merci pour ces précisions mais du coup je comprends que c'est beaucoup plus pertinent sur les tempaltes d'auteurs qui ont effectivement souvent plein des polices distantes.
Pour une opération aussi ponctuelle que l’utilisation de fontes sur certains éléments avec cassiopea, je vais certainement plutôt utilisés ta méthodologie manuelle :-)

[RobertG]

Bonjour,

C'est ce que je pensais aussi. Finalement, récupérer la police, la copier et la déclarer dans le user.css n'est pas vraiment plus compliquer que de déclarer son URL d'accès, dans Cassiopeia.

En marge de cette question : l'accès distant aux polices FontAwesome pose-t-il aussi des problèmes au niveau du RGPD ? Je viens accidentellement de constater sur un site, en cherchant s'il utilisait des polices Google distantes, que des polices FontAwesome sont récupérées au vol (il faudra que je cherche quelle extension est en cause).

[daneel]

Effectivement, le fait de le faire manuellement permet également de comprendre et d'éviter une extension supplémentaire.
Vous avez tout à fait raison !



Quand à font-awesome, c'est la Font Awesome Free 5.x qui est proposé localement par défaut dans joomla 4.2 comme je l'indique également dans la discussion : https://forum.joomla.fr/forum/joomla...re-d-un-module
Si tu as des appels vers une version en ligne, c'est certainement une extension tierce ou un framework de template. Sans doute par rapport à joomla 3 ou le besoin d'avoir une version mis à jour. C'est un peu dommage mais tu fais bien de souligner ce problème car le plugin pourrait aussi le gérer ( il est prévu d'agir sur d'autres éléments que google font).

En règle générale, l'ip du visiteur peut être récupéré par chaque lien externe donc une situation qui nous oblige à indiquer les services tiers utilisés dans la politique de confidentialité. Si chaque pays de l'Europe effectue l'adaptation du RGPD, à terme on devrait être tous au même niveau donc il est important de se préparer surtout quand au stade du développement, en ayant le temps et le budget nécessaire. Au final, cela ne prendra pas de temps supplémentaire et on sera plus performant.

[RobertG]

Merci de ces précisions.
Pour le moment, je ne retrouve pas ce que j'avais vu tout à l'heure, mais il semble qu'Astroid ou des templates l'utilisant fassent appel à la version 6.0.0 (
https://use.fontawesome.com/releases/v6.0.0/css/all.css)

[daneel]

Merci de ces précisions.
Pour le moment, je ne retrouve pas ce que j'avais vu tout à l'heure, mais il semble qu'Astroid ou des templates l'utilisant fassent appel à la version 6.0.0 (
https://use.fontawesome.com/releases/v6.0.0/css/all.css)

dans le pack actuel on est toujours sur la version 5, la réponse est dans les discussions sur github :

- Il y a beaucoup de nouvelles icônes Font Awesome v6 :-)
Savez-vous quand cela peut être intégré ? 4.2.3 ?

- Les packs d'icônes Font Awesome ne sont pas rétrocompatibles, de sorte que leur mise à niveau entraînerait la rupture d'autres sites Web. Si nous les mettons à niveau, ce sera probablement dans Joomla 5.0.

https://github.com/joomla/joomla-cms/pull/36906

D'où la nécessité d'ajouter le lien vers la nouvelle font awesome pour certains templates.

[RobertG]

Merci !