Ajouter et utiliser une police locale dans Cassiopeia ?

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

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]

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.

[daneel]

Désolé, je n'y arrive pas et je ne trouve pas quelle est mon erreur.
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.

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 !

Testé avec succès avec italianno ( je t'ai indiqué le fichier fonts-local_italianno.css que j'ai utilisé dans le message précédent) ainsi que "beau rivage'

[RobertG]

En effet, je me suis aperçu que le code récupéré avec la police nécessitait en fait de remonter de deux niveaux.
Après correction, plus d'erreur, enfin !
Il me restera à m'en souvenir dans la vraie vie, avec une série de sites à migrer en leur donnant le même look (exigences des clients...).

Merc Yann !

Mais je crois qu'en plus de potasser ton futur tuto sur Cassiopeia, il va me falloir reprendre de zéro l'apprentissage de CSS, de Grid, Flexbox, etc. A mon âge !

Il faut maintenant que je m'attaque à l'insertion des polices dans le fichier editor.css, sachant qu'utilisateur de JCE depuis des années, je n'ai quasiment jamais eu à le paramétrer...

[RobertG]

En ce qui concerne Astroid, la méthode est plus simple : ajout des fichiers woff et woff2 à la racine du dossier fonts, déclarations dans le fichier css/custom.css, et les polices apparaissent dans la liste en tant que polices personnalisées (ou custom fonts). Merci à Chacapamac pour ses conseils dans la discussion Github.

[lefabdu51]

@robertg: tu n'est pas obligé d'utiliser editor.css. Ce fichier ne sert que pour les règles spécifiques à l'éditeur.
Dans les paramètres de tinymce, tu peux indiquer directement le fichier user.css du template. Comme cela, les classes utilisées et personnalisées sont utilisable directement.
Le fichier editor.css n'est à utiliser que si tu souhaites un affichage different pendant l'édition par exemple, la classe H1.title en rouge durent l'édition, et une fois édité et le contenu en ligne , la classe h1.title soit en vert(cas pour touts les documents déja édités).
si tu souhaites utiliser le fichier editor.css, prépares en un spécifique pour chaque groupe d'utilisateurs et crées un set de paramètres pour chaque groupe.COmme cela chaque groupe auras ses propres spécificités d'édition..

[RobertG]

Merci des infos lefabdu51 , mais pour le moment, j'ai renoncé à cette modification. Je reverrai peut-être la question plus tard en forçant peut-être certains styles spécifiques définis dans le user.css.

[daneel]

J'apporte ici un complément d'informations à propos de l'affichage tinymce avec les styles du front sous Cassiopeia.

Dimitris Grammatiko, que l'on a rencontré au mois de mai 2022 lors du joomladay fr, a publié une amélioration de tinymce en "vrai wysiwyg" !

https://wysiwyg.dgrammatiko.dev/

Cette extension s'installe normalement et configuré pour le template Cassiopeia.
Dans la documentation, il explique comment utiliser cette fonctionnalité pour les autres templates.

RobertG N'hésite pas à nous faire un retour sur le sujet !
Au besoin tu peux aussi envoyer un PR sur le projet sur github ou indique ici sur ce fil et on le transmettra.

https://github.com/dgrammatiko/wysiwyg-tinymce-j4.1

[woluweb]

J'apporte ici un complément d'informations à propos de l'affichage tinymce avec les styles du front sous Cassiopeia.

Dimitris Grammatiko, que l'on a rencontré au mois de mai 2022 lors du joomladay fr, a publié une amélioration de tinymce en "vrai wysiwyg" !

https://wysiwyg.dgrammatiko.dev/

Cette extension s'installe normalement et configuré pour le template Cassiopeia.
Dans la documentation, il explique comment utiliser cette fonctionnalité pour les autres templates.

Merci Yann de rementionner ça : j'avais vu passer mais j'avais oublié...

Je viens de tester sur un site qui n'utilise que Cassiopeia :
- j'ai installé
- le plugin est bien activé
- mais aucun effet ni en front, ni en back on dirait (même qd je mets son exemple de code mentionné dans la doc)

Ca fonctionne chez toi ?

[daneel]

Ca fonctionne chez toi ?

oui cela fonctionne.

Sans le plugin "wysiwyg tinymce"



Avec "wysiwyg tinymce" installé, les fontes sont bien présentes dans le menu et les styles sont appliqués dans le contenu.
Cela correspond en tout point à la demande de Robert sur le sujet... et sans avoir besoin de gérer une feuille de style spécifique.



A noter que la feuille de style qui est utilisé est template.min.css, c'est à dire la version minifiée de template.css qui appelle les variables heading et body font family comme expliqué précédemment.

Les paramètres de style du template cassiopeia que le webmaster a choisi depuis l'administration du site sont donc bien repris dans l'éditeur et appliqué comme pour le front.

[woluweb]

Ben mince.
Je prends son exemple de l infobox... puis rien !
Quel pourrait être le souci ? Je vois vraiment pas...

[RobertG]

Bonjour et merci !

Je confirme l'efficacité du plugin sur TinyMCE avec Cassiopeia. En revanche, après copie des fichiers du plugin sur les templates Astroid One et Zero, ça n'a rien changé dans l'éditeur.

Mais d'une part j'utilise JCE sur tous les sites dont je m'occupe, d'autre part j'ai pour le moment renoncé à ajouter des polices qui soient disponibles dans l'éditeur de texte.

[daneel]

Quel pourrait être le souci ? Je vois vraiment pas...

N'ayant pas reproduit l'erreur, cela me semble difficile. Essaye de voir directement avec Dimitris.

Pour Robert, effectivement si c'est jce, on n'est plus dans l'objectif initial.
Au moins, on aura fait le tour de la question.

[herve]

Bonjour
Bon ça y est je pense y être arrivé après quelques soucis.

daneel

1/ thème enfant
après avoir suivi ton tuto, quand j'ys suis arrivé, j'ai tout mis dans le template enfant, juste pour regrouper tout ce que je fais dans un seul dossier que je sauvegarde plus facilement.
Est-ce que tu verrais une contre-indication ?

2/ templateDetails.xml
dans ton tuto , j'ai fais la solution la plus simple
* copie des fontes
* copie de la déclaration des fontes recopiés de https://google-webfonts-helper.herokuapp.com puis l'affectation des h1 ... dans le user.css
je n'ai pas vu l'intérêt de mettre templateDetails.xml de ton 4). Du coup cette partie n'est-elle pas plutôt rattachés uniquement à 3) ?

3/ erreur de fonctionnement
J'avais repris un code d'exemple :

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Lobster Two", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 700; }

qui a ensuite fonctionnait avec

h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: "Lobster Two";
font-weight: 700;
}

est-ce qu'à tout hasard, tu vois un bloqueur?

4/ modern navigateur
Il ya qq années quand j'avai déjà regardé ce sujet, je me souvenais d'avoir vu que l'on pouvait privilégier les fichiers plus récent comme ".woff2" et négliger les anciens navigateurs pour ds raisons de performance. Qu’en penses-u

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>

...