[RÉGLÉ] Ajouter et utiliser une police locale dans Cassiopeia ?

[RobertG]

Bonjour,

Comme je l'ai dit dans d'autres discussions, je suis en train de migrer un site J3 vers J4 en utilisant, pour l'instant, Cassiopeia.

Sa propriétaire veut absolument conserver l'aspect actuel, et notamment les polices de caractères. Dans le template original, et référencées dans des feuilles de style, j'ai deux polices texgyreadventor en otf, et TitilliumMaps29L002 en eot, otf et woff.
Je ne suis pas fichu de trouver quelle police est réellement utilisée sur le site !

J'ai placé les fichiers texgyreadventor dans un dossier media/templates/site/cassiopeia/fonts et copié les codes @font-face correspondants (depuis une feuille "personal.css de l'ancien site) dans le user.css, mais apparemment, ça n'est pas pris en compte.
Les explications que j'ai pu lire sur l'ajout local ne semble correspondre qu'aux polices Google. Peut-être y a-t-il autre chose à faire ?
Ou alors une autre définition du chemin qui est actuellement de type

@font-face {
font-family: 'texgyreadventor';
src: url('../fonts/texgyreadventor-regular.otf');
font-weight: normal;
font-style: normal;
}

Merci de votre aide !

[RobertG]

Bonjour,

Malgré la lecture de cette page https://magazine.joomla.org/all-issu...of-tips-tricks je ne comprends toujours pas, sinon qu'il faudrait que je crée un template enfant pour Cassiopeia, quels fichiers placer dans un dossier fonts du template et comment définir cette police dans celles disponibles à choisir dans la gestion du style.

[RobertG]

Bonjour,

Je reviens sur cette question pour un nouvel essai avec des polices Google dont j'ai récupéré les fichiers après relecture de la doc de woluweb et des explications d'Astrid Günther.
Astrid, si je comprends bien, force la police choisie pour tous les "h". Dans la doc de woluweb la solution est de créer un template enfant et d'insérer l'option dans le xml, mais l'exemple est pour l'insertion d'une police distante.
Sachant que j'ai deux polices "Italianno" et "Dosis" (pour tests dans "fonts/italianno-v16" et "fonts/dosis-v27") que je veux rendre disponibles dans le choix de ma page de paramétrage de Cassiopeia, et que j'ai placées dans le dossier de Cassiopeia dans media, comment nommer la "value" dans la ligne "option value=", en lieu de place de "https://fonts.googleapis.com/
css2?/"

Et tant que j'y suis, y a-t-il un moyen comparable dans Astroid ?

Merci de vos conseils !

Serait-ce

<option value="media/templates/site/cassiopeia/fonts/dosis-v27/">Dosis (local)</option>

ou quelque chose comme

<option value="media/templates/site/cassiopeia/css/user.css">Dosis(local)</option>

[lefabdu51]

bonsoir,
perso, j essayerais plutot /media/ comme chemin ... comme ça, c est le chemin absolu vers la fonte.
La tu a mis un chemin relatif, donc si cassiopea a une racine située dans le dossier /template, cela ne fonctionneras pas.
dans le document que tu a mentionné, regarde le chemin vers la favicon qui est aussi situé dans le dossier media du template.

[RobertG]

Ce n'est pas ça que je veux, c'est pouvoir retrouver la police dans les choix du style du template, comme le montre woluweb dans sa présentation, mais en police locale et pas chez Google..

[RobertG]

Mais là, comme Astrid, tu forces toutes les balises "h", et ça ne fera pas apparaître la police dans la liste de choix du style.

[RobertG]

Bonjour,

Ce que je souhaite, c'est non pas comme le fait Astrid définir précisément les polices et à quoi elles s'appliquent, mais les rendre disponibles dans les paramètres des templates mais aussi dans les éditeurs de texte.
Serait-ce impossible ?

[daneel]

Bonjour,

Ce que je souhaite, c'est non pas comme le fait Astrid définir précisément les polices et à quoi elles s'appliquent, mais les rendre disponibles dans les paramètres des templates mais aussi dans les éditeurs de texte.
Serait-ce impossible ?

En fait, tu n'est pas loin de la solution. Je vais essayer d'expliquer la méthode utilisée dans Cassiopeia selon ma propre approche du problème, étape par étape

1) Par défaut, je vais chercher les polices dans google font via https://google-webfonts-helper.herokuapp.com/fonts
Je les insère dans des répertoires distincts portant le nom de chaque police directement dans le repertoire fonts dans les ressources media de cassiopeia

\media\templates\site\cassiopeia\fonts\nomdefonte

2) je personnalise la css en implantant directement le code css dans user.css
A ce niveau, je peux décider également d'assigner le choix des polices pour les balises titres, le contenu principal et d'autres classes personnalisées. Cela consiste simplement à indiquer la fonte ainsi que les polices de secours. C'est ce que j'ai expliqué dans la discussion sur l'implantation d'une police cursive.
https://forum.joomla.fr/forum/joomla...29#post2041929
Cette personnalisation ne permet pas de choisir dans les paramètres du template vu que l'on a effectué l'assignement dans user.css

3) Alternativement, si on veut que l'utilisateur puisse choisir la ou les polices, il faut oublier l'étape 2, pas de user.css et créer un template enfant dans la même logique que les créateurs de cassiopeia donc créer une css par fonte.

Sous notepad++, tu créé un nom de fichier indiquant fonts-local_nomdelafonte.css
Tu reprends les font-faces comme celle indiqué par https://google-webfonts-helper.herokuapp.com/fonts
en prenant soin de suivre le chemin vers la fonte donc logiquement, ce sera par exemple
url("../../fonts/nomdelafonte/nomdelafonte.woff")

Le fichier sera sauvegardé dans

\media\templates\site\cassiopeia\css\global\fonts-local_nomdelafonte.css

L'astuce sera alors d'editer ce même fichier et d'ajouter après les font-face, le paramétrage de choix de fonte pour les balises titres (heading 1 à h6) et le corps de la page (body) en utilisant les variables css utilisés par cassiopeia ! ce qui donne :

:root {
--cassiopeia-font-family-body: "nomdelafonte", sans-serif;
--cassiopeia-font-family-headings: "nomdelafonte", sans-serif;
--cassiopeia-font-weight-headings: 600;
--cassiopeia-font-weight-normal: 300;
}

le nom de la fonte est celui que l'on a défini dans le fichier à font-family.
le weight étant l'épaisseur défini également dans le font-face.

Si on a qu'une seule fonte pour les titres et le corps de la page alors ce sera le même nom mais si vous avez besoin de définir une combinaison de deux polices de caractères alors il faudra ajouter les font-face des deux fontes.

Vous pouvez créer autant de fichier fonts-local_nom.css que vous voulez, du moment que les fichiers soient bien disponibles dans le dossier fonts et que chaque fichier respecte cette structure font-face + variables css assignant le choix pour les balises titres hx et le corps.

4) Dernière étape, on edite le templateDetails.xml du template enfant en ajoutant le nom des fichiers css créés dans l'étape 3 à la ligne 98 comme pour roboto,

<option value="media/templates/site/cassiopeia/css/global/[B]fonts-local_nom.css[/B]">Nom de la police ou de la combinaison</option>

Ainsi chaque choix de fonte sera affiché en paramètre et vous pourrez proposer soit une police unique soit différentes combinaisons, la valeur représente le chemin du fichier à charger en preload.

Il faut remarquer que je n'ai pas copié les fontes dans le template enfant mais dans celui de cassiopeia comme pour les fichiers css créé dans le répertoire css global, ils ne seront donc pas écrasés par les mises à jour... C'est juste que le paramètre de choix de fontes est défini dans le manifeste xml et dans ce cas précis, c'est bien celui qui nécessite de créer un template enfant à lui tout seul.

Vérifier que cela fonctionne ( utiliser l'inspecteur pour vérifier que les chemins vers les fontes correspondent bien ). Vous pourrez ensuite passer à l'optimisation en minifiant les fichiers css ( cela consiste à réduire la taille du fichier css, celui-ci sera sauvegardé sous le même nom mais avec l'extension .min.css).

On peut aller plus loin mais c'était surtout pour expliquer le fonctionnement à un niveau un peu plus avancé.

Pour rappel, le template cassiopeia sert de référence pour créer un template moderne utilisant bootstrap 5 et cssgrid. Alternativement, les frameworks de templates utilisent Google Font pour écarter ce problème. Hors, le choix d'avoir une police locale permet de résoudre en partie les problèmes liés au RGPD et à l'utilisation de Google Font. Mon objectif sera de vous proposer au final d’insérer les polices de votre choix et de les sélectionner sans ligne de code avec votre propre framework.

[RobertG]

Un grand merci, Yann !
Il me restera à essayer demain.

[RobertG]

Bonjour,

Encore merci Yann !
J'ai suivi tes explications et seulement ajouté les fichiers css en plus des polices que j'avais déjà mises dans le dossiers fonts de Cassiopeia. Dans ces css, je n'ai mis que font-face et la définition pour root. Après ajout des options dans le xml du template enfant, je retrouve bien les deux polices ajoutées dans le choix du style (à ce propos, je ne comprends pas pourquoi en créant un template enfant, je me retrouve avec un deuxième style portant son nom et une mention copie de Cassiopeia).
Mais je ne retrouve pas ces polices dans la liste de celles disponibles dans l'éditeur de texte : y a-t-il une solution ?

Pour Astroid, j'ai suivi ce tuto de Joomdev https://www.joomdev.com/how-to-add-c...omla-template/, mais ça n'a pas pour autant ajouté les polices dans les paramètres du style ni dans l'éditeur de texte.

PS : ce que je trouve fort dommage, c'est qu'on n'ait pas une possibilité d'ajout de police indépendante du template. Si j'obtiens quelque chose avec Cassiopeia (qui plutôt du type paramétrage d'informaticien ou de codeur plutôt que d'utilisateur), il faudra trouver une nouvelle solution en cas de changement de template, quand l'idée initiale était que le template n'était qu'un habillage où il suffisait de redéfinir les positions des modules. En changeant de template, si on n'a pas la même police par défaut dans le nouveau, l'ensemble du site va changer de look au niveau des textes eux-mêmes.

[daneel]

Mais je ne retrouve pas ces polices dans la liste de celles disponibles dans l'éditeur de texte : y a-t-il une solution ?

Comme pour l'ancienne version, joomla 4 utilise un fichier spécifique pour personnaliser l'éditeur, il s'agit de "editor.css".
Dans Cassiopeia, il utilise sa version "minifié" nommé editor.min.css qui se trouve dans \media\templates\site\cassiopeia\css
Il y a aussi la version tar.gz : editor.min.css.gz .

Comme celui de cassiopeia est susceptible d'être mis à jour donc de perdre les changements, il faudra donc copier le fichier
et le coller dans le repertoire css du template enfant ( \media\templates\site\cassiopeia-enfant\css )

Ce que je conseille, c'est de prendre le fichier editor.css d'origine contenant des paramètres pour la mise en forme actuelle puis d'ajouter les polices assignés en indiquant le nom des fontes ainsi que celle de secours.

exemple :
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: roboto;
font-weight: 700;
}

De sauvegarder ce fichier dans la css du template enfant en editor.css puis en editor.min.css (même sans faire de minification ) sinon ce sera le fichier de la version d'origine qui sera utilisé. Eventuellement, tu peux faire celui de la version gz si tu as un outil de compression adéquat.

On retrouve bien le nom dans l'éditeur :


Bien qu'il existe des solutions tierces comme phoca font, je teste actuellement l'insertion de fontes et la detection dans un template enfant sans ligne de code. J'ai déjà une petite idée de comment detecter automatiquement les fontes et les ajouter dans l'editeur mais cela me demande un peu de temps. Mais par rapport à ton PS, je te proposerai de tester cela dans une semaine.

[RobertG]

Merci Yann !
J'ai vu aussi tout à l'heure une autre extension qui permettrait d'importer en local les polices Google souhaitées, mais je n'ai pas retenu le nom de l'extension.

[daneel]

Merci Yann !
J'ai vu aussi tout à l'heure une autre extension qui permettrait d'importer en local les polices Google souhaitées, mais je n'ai pas retenu le nom de l'extension.

il existe également import font de GHSVS.de, c'est un plugin système pour joomla qui télécharge la fonte pour la stocker en cache donc pas de lecture depuis google font mais du répertoire cache. Cela sous-entend une réactualisation régulière, ce qui est plutôt étonnant mais pourquoi pas ? c'est une solution.

https://github.com/GHSVS-de/plg_system_importfontsghsvs

[RobertG]

Merci ! Je testerai. Sinon, j'ai aussi vu ceci https://extensions.joomla.org/extens...-google-fonts/ qui semble permettre d'importer à volonté.

Bon, j'ai testé le plugin et récupéré une erreur

0 The {{type}} install adapter does not exist.

sans référence au plugin lui-même. Le zip est peut-être en cause ? J'ai signalé l'erreur à l'auteur.
Tests avec PHP 7.4, 8.0 et 8.1

[RobertG]

Bonjour,

J'essaie de résumer pour Cassiopeia.

1. on crée un template enfant
2. on récupère la police (zip des différents fichiers + déclaration css) sur le site Google (ou un autre)
3. on dézippe en local et on place les fichiers de la police dans un dossier "media/templates/site/cassiopeia/fonts/nom_police"
4. dans le dossier "media/templates/site/cassiopeia/css/global" on place un fichier "fonts-local_nom_police.css" contenant la déclaration css de la première étape en prenant garde au chemin d'accès à ces fichiers
5. dans le dossier du template enfant on modifie le fichier templateDetails.xml en ajoutant sous cette ligne

   <option value="media/templates/site/cassiopeia/css/global/fonts-local_roboto.css">Roboto (local)</option>

   son équivalent avec le nom du fichier css de la nouvelle police fonts-local_nom_police.css

Si je ne me suis pas trompé, les polices devraient alors apparaître dans la liste des polices locales de la liste déroulante "Préférence des polices".
N'hésitez surtout pas à me corriger ! Surtout que sur le site exemple où j'ai reproduit cette séquence, dans un des articles des exemples de blog, la police n'a visuellement pas changé et dans le style, j'ai "font-family: var(--body-font-family);" ce qui ne me permet pas de savoir quelle est la police réelle.

Après tests, les deux polices Dosis et Italianno récupérées et installées dans le site et qui peuvent être sélectionnées dans les préférences de police déclenchent sur la page du site ces messages :

La feuille de style http://www.joom42/index.php/blog/vot...544d4504a51ca7 n’a pas été chargée car son type MIME, « text/html », n’est pas « text/css ». votre-template

La ressource à l’adresse « http://www.joom42/index.php/blog/vot...544d4504a51ca7 » préchargée avec le préchargement de lien n’a pas été utilisée après quelques secondes. Assurez-vous que tous les attributs de la balise de préchargement sont définis correctement.

Il semble que pour Dosis, le site prenne alors la police distante Google mais que pour Italianno, ce soit la police par défaut.
Reste à comprendre pourquoi ce type mime n'est pas le bon et quels fichiers sont en cause (les fonts-local ?), puis trouver comment corriger.