Ajouter et utiliser une police locale dans Cassiopeia ?

[daneel]

Dans le fichier fonts-local_nomdufichier.css, tu as indiqué le chemin

src: url("../fonts

Hors, tu peux confirmer avoir changé pour mettre le chemin exact vers les fichiers ?
L'inspecteur du navigateur indiq

Pour te repérer, tu détermine le repertoire où est stocké le fichier fonts-local_nomdufichier.css
normalement c'est media\templates\site\cassiopeia\css\global
Par rapport à ce chemin, tu remonte au repertoire parent css via ".." puis le repertoire cassiopeia en ajoutant ".." espacé par des slashs (barre oblique).
puis tu indique le repertoire fonts ainsi que le sous-repertoire du nom de lafonte.

Le chemin indiqué est donc relatif à l'emplacement du fichier css vers le repertoire de la fonte.

Ainsi tu devrais avoir par exemple...
url("../../fonts/roboto/Roboto-Regular.woff")

exemple de fichier fonts-local_italianno.css :

/* italianno-regular - latin */
@font-face {
font-family: 'Italianno';
font-style: normal;
font-weight: 400;
src: url('../../fonts/italianno-v16-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../../fonts/italianno/italianno-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../fonts/italianno/italianno-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../../fonts/italianno/italianno-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../../fonts/italianno/italianno-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../fonts/italianno/italianno-v16-latin-regular.svg#Italianno') format('svg'); /* Legacy iOS */
}

:root {
--cassiopeia-font-family-body: "Italianno", sans-serif;
--cassiopeia-font-family-headings: "Italianno", sans-serif;
--cassiopeia-font-weight-headings: 400;
--cassiopeia-font-weight-normal: 400;
}

Dans le fichier templateDetails.xml, j'ai ajouté
<option value="media/templates/site/cassiopeia/css/global/fonts-local_italianno.css">Italianno (local)</option>
au niveau du groupe fonte local.

Dans le cas de l'utilisation d'une police cursive, je te conseille de combiner avec une police sans serif pour le contenu principal (body) et d'utiliser la cursive uniquement pour les titres (headings) ce qui peut se faire en indiquant les paramètres des deux fontes dans le même fichier css.

[RobertG]

Désolé, je n'y arrive pas et je ne trouve pas quelle est mon erreur. Les options sont bien présentes dans la liste des polices locales du style.
La police est dans fonts/italianno-v16-latin-regular du dossier cassiopeia (media).
Le fichier fonts-local est bien dans le dossier css/global de Cassiopeia (media), voir le fichier joint.
Y aurait-il une erreur dans les noms ? car j'ai la police par défaut quand je choisis Italianno, y compris si je la force pour body dans l'inspecteur du navigateur.

Oh, il y a un truc avec cette police ! alors que dans la démo Google c'est une police "handwriting" italique (ce qui est le cas pour le titre général sur un site que je dois migrer), c'est une police de type standard, et quand je force en italique, ça n'a rien à voir avec l'exemple chez Google.
Il faut que j'en essaie une autre.
fonts-local_italianno-v16-latin-regular.txt

PS : même souci avec la police "Beau Rivage", de type handwriting aussi !
PS 2 : pourtant, si j'appelle la police Google distante, elle est bien affichée !

[daneel]

Bonjour,

Tu as oublié de préciser pour les variables css que l'on doit ajouter dans le fichier fonts-local_nom_police.css à la fin de chaque fichier.
C'est nécessaire pour que l'appel soit la configuration font-family soit prise en compte.

Ce qui est intéressant avec les variables, c'est justement que la configuration dans template.css est dynamique.
On peut donc définir couleurs, nom de police et autres valeurs soit par une feuille de style ou dans l'entête de page sans modifier template.css ou effectuer une surcharge.

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

[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

[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 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]

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]

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.

[RobertG]

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

[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]

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 ?

[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]

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

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