Police Cursive sous Joomla

[highjumper211]

Bonjour,

Quelqu un peut il me dire comment integrer une police cursive pour le titre du Site sous Cassiopea

merci
Belle journée

[schtroumph]

Salut

Par le CSS en utilisant @font-face.

[highjumper211]

Bonjourm
Quel fichier CSS sous cassiopea ?

Merci pour le retour

[highjumper211]

J'ai créé un fichier custom.css en ajoutant un import de police cursive puis j'ai appliqué la font sous h1 mais je ne vois pas ou faire reconnaitre mon fichier css sur ma page titre du site

ien à vous

[highjumper211]

Je dois le créer ? car il ne s'y trouve pas

[highjumper211]

Que dois je inclure dedans .

J'y ai mis
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

h6 font-family: 'Satisfy', cursive;

Mais cela n'agit pa sur mon h6

je vous remercie pour votre aide

[schtroumph]

Perso je ne veux absolument pas utiliser les services de Google. Du coup je met les fichiers de ma police dans le dossier css du template. Pour les différents format de la police j'utilise www.fontsquirrel.com. La conversion va même te créer un fichier css dans lequel tu aura le code a utiliser pour appeler la police (et donc a mettre dans ton fichier user.css) :

@font-face {
    font-family: 'lucioleregular';
    src: url('paragraphe-police/luciole-regular-webfont.eot');
    src: url('paragraphe-police/luciole-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('paragraphe-police/luciole-regular-webfont.woff2') format('woff2'),
         url('paragraphe-police/luciole-regular-webfont.woff') format('woff'),
         url('paragraphe-police/luciole-regular-webfont.svg#lucioleregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

Il suffit juste de modifier le chemin vers les fichiers de la police.

Au passage tu a vue qu'avec Joomla 4 il est préférable d'avoir un template enfant ?

[schtroumph]

Moi pareil, je n’emploie pas de polices Google. Mais je mets les fichiers de mes polices dans le dossier « fonts » et non dans le dossier « css » comme toi. Je suis étonné que cela fonctionne chez toi.

Pourquoi ? il suffit de mettre le chemin vers le dossier où se trouvent les fichiers de la police.

[daneel]

Bonjour

Exemple avec google font en local...



1. Dans Google Font, choisissez votre police cursive :

https://google-webfonts-helper.herokuapp.com

2. Puis télécharger l'archive en bas de page (la 4ème étape "download files")... Notez le code css écrit dans pour l'écrire dans user.css

3. décompresser l'archive zip puis transferer le contenu dans votre site dans un nouveau dossier à définir dans media, le chemin depuis la sortie de la version 4.1 est désormais :

[B]media/templates/site/cassiopeia/fonts/[/B]nomdevotrefonte

4. Toujours dans media, vous devez définir user.css lié à cassiopeia...
le chemin exact est :

[B]media/templates/site/cassiopeia/css/[/B]user.css

5. editer ce fichier user.css en insérant le code pour appeler la police.
reprenez le code relevé sur le site de google-webfonts-helper
n'oubliez pas d'ajouter le nom du dossier au chemin de l'url sinon la fonte ne sera pas trouvée.

Ajouter au code les balises titres qui utiliseront votre police ou autre éléments.
N'hésitez pas à donner des alternatives de secours dans le cas où la police ne serait pas chargée :

exemple : Pour appliquer votre fonte à toutes les balises titres (de H1 à H6)...

h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: "[B]nomdevotrefonte[/B]", "Helvetica Neue", Arial, sans-serif;
font-weight: 700;
}

6. tester, tester encore...

Utiliser la console du navigateur pour détecter les erreurs de chargement.

Pour résumer, j'ai tenté rapidement d'expliquer comment ajouter une police de caractères dans votre site internet.
J'ai pris l'idée de google font helper qui permet de récupérer les polices google font pour les utiliser localement donc depuis votre site internet.

La méthode est valable également pour des polices de caractères qui ne font pas partie de google font. (Suffit juste de prendre modèle sur le code css donné précédemment) mais attention, tous les fontes ne sont pas écrites pour le web et certaines sont également sous licence commerciale. Le générateur de Squirrel l'indique également avec la condition suivante :

Les polices que je télécharge sont légalement admissibles à l'incorporation sur le Web. Font Squirrel offre ce service en toute bonne foi. Veuillez respecter les CLUF de vos polices.

CLUF étant l'acronyme du Contrat de Licence de l'Utilisateur Final

Pour info, Google propose uniquement des fontes libres ( sous LICENCE SIL OPEN FONT), le service n'étant que l'hébergement et la classification des ces polices. Vous pouvez donc utiliser librement et gratuitement ces polices sans Google ! Et c'est vivement conseillé...

En janvier de cette année 2022, un tribunal allemand à infligé une amende de 100 euros à un site web pour avoir utiliser une police web hébergé par Google. La décision de la troisième chambre civile du Landgericht München à Munich a conclu que le site Web, en incluant la police hébergée par Google-Fonts sur ses pages, avait transmis l'adresse IP du demandeur non identifié à Google sans autorisation et sans raison légitime de le faire.

Et cela enfreint le Règlement général européen sur la protection des données (RGPD). C'est-à-dire que lorsque le plaignant a visité le site Web, la page a obligé le navigateur de l'utilisateur à récupérer une police de Google Fonts à utiliser pour du texte, ce qui a divulgué l'adresse IP de l'internaute au géant américain de l'Internet. Ce type de liens dynamiques est normal avec Google Fonts ; le problème ici est que le visiteur n'a apparemment pas autorisé le partage de son adresse IP. Le site Web aurait pu éviter ce drame en hébergeant la police.

source : https://rewis.io/urteile/urteil/lhm-...2-3-o-1749320/

Sur le territoire français, la CNIL s'approche de plus en plus du modèle allemand donc le moyen le plus simple, c'est d'éviter d'utiliser les services de Google dont Google Fonts en utilisant localement vos fontes.

De plus, cela peut améliorer votre score CLS dans les signaux web essentiels ( https://medium.com/carwow-product-en...e-8721eb20feed )

[daneel]

Complément d'informations :

Si votre police Web n'est pas disponible, le navigateur affichera la police de secours, celle-ci est indiqué dans votre css après "font-family".

Par exemple, si votre le chemin indiqué n'est pas le bon, la police ne se chargera pas et utilisera la police de secours. Devant l'absence de style, il faudra indiquer la famille la plus approchante dans le système ( serif, non-serif..)

Quelles polices de secours ?

Par défaut, il existe 5 familles : serif, sans-serif, monospace, cursive et fantasy

https://www.w3.org/Style/Examples/007/fonts.en.html

Généralement, on fait la différence facilement entre serif ( avec empattement comme times new roman) et sans-serif (arial sur pc, helvetica sur mac) mais quelle solution pour les polices cursives ? Sur pc, je ne connais qu'une police cursive livré avec win, c'est l'affreuse comic Sans MS... bien loin de la grâce et la légèreté des fontes cursives alors par principe, je choisis une police générique sans empattement donc sans serif.

Par exemple, cela donnera pour Rouge Script, une belle cursive pour le web réalisée en 2017 par Sabrina Mariela Lopez ( https://typesenses.com ) et disponible sous licence SIL uniquement pour usage personnel, reprise dans la collection de Google Fonts :
https://google-webfonts-helper.herok...?subsets=latin

h1, h2, h3, h4, h5, h6 {
font-family: 'Rouge Script', sans-serif;
font-weight: 400;
}

Autre astuce pour les polices de secours. Quand vous utilisez une police qui peut mettre du temps à s'afficher, vous aurez une sorte d'affichage momentanée (un "flash" ) sans style entre la police de secours et la police web, cela peut bousculer la mise en page notamment en raison des différences de taille, cependant on peut tenter de "gommer" ces différences en adaptant largeur et hauteur entre les deux. Pour vous aider, vous avez l'outil "font style matcher" pour vous aider.

https://meowni.ca/font-style-matcher/

Personnellement, j'applique ces principes dans mes créations mais ce n'est en aucun cas, une obligation ! C'est surtout pour comprendre un peu mieux l'intégration des polices web dans votre site Joomla.



Pour aller plus loin...

https://drafts.csswg.org/css-fonts-5/

Depuis décembre 2021, on a désormais de nouveaux descripteurs pour ajuster les différences entre police web principale et police de secours fonctionnant en pourcentage.
demonstration (fonctionne sous Chrome) :
https://deploy-preview-15--upbeat-sh...Rouge%20Script

Malheureusement, cela fonctionne sur firefox et chrome mais pas encore sur safari :
https://caniuse.com/mdn-css_at-rules...ce_size-adjust

Affaire à suivre !

[highjumper211]

Bonjour

J'ai créé un dossier fonts dans media/template.... et inscrit ce code
@font-face {
font-family: '3dumbregular';
src: url('../fonts/3dumb-webfont.woff2') format('woff2'),
url('../fonts/3dumb-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

mais il ne fait rien...

J'ai oublié quelque chose ?

[schtroumph]

Tu aurais un lien vers le site en construction ?

[highjumper211]

Bonjour,

http://lestoilesdesylvie.art/index.php?lang=fr

Merci

[daneel]

J'ai oublié quelque chose ?

Hello,

Je crois avoir fait le tour de la question mais bon, je comprends que c'est compliqué.

Voici une solution alternative bien plus simple pour obtenir ce résultat :



1. copie le code suivant

@import url('//fonts.cdnfonts.com/css/3dumb');
.brand-logo {font-family: '3Dumb', sans-serif; font-size:44px;text-decoration:none;}

2. Si tu as créé le fichier user.css, passe à l'étape 3

dans systeme > template du site > Cassiopeia Détails et fichiers
dans editeur, tu clique sur "nouveau fichier"
puis tu choisis le repertoire CSS de
/media/templates/site/cassiopeia

nom de fichier user
type de fichier .css
puis tu clique sur créer



3. Dans système > template du site > cassiopeia details et fichier

tu clique sur le repertoire "css" puis sur user.css pour editer le fichier

tu colle les deux lignes et tu enregistre... voilà, c'est fait, tu peux voir le résultat.

4. Pour info :

source : https://www.cdnfonts.com/3dumb.font

cdnfont est une alternative à google font.

Cependant, cela ne t’empêche pas de prendre le temps de lire mes messages précédents pour comprendre la technique, pourquoi c'est mieux de les intégrer localement (RGPD) mais je viens de t'expliquer comment appliquer ton choix de police en moins d'une minute !

Après tu peux faire la même chose en remplaçant .brand-logo avec les balises H1 à H6, body...

[highjumper211]

Super Merci Daneel

Merci pour tes explications. Je vais regarder cela demain

Encore un grand merci