Police Cursive sous Joomla

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Police Cursive sous Joomla

    Bonjour,

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

    merci
    Belle journée

  • #2
    Salut

    Par le CSS en utilisant @font-face.
    Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et en téléchargement les fichiers de traduction Fr (non officiel) d'Akeeba Backup 9 (traduction par RoberG) et de Kickstart Core (par moi-même).

    Commentaire


    • #3
      Bonjourm
      Quel fichier CSS sous cassiopea ?

      Merci pour le retour

      Commentaire


      • #4
        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

        Commentaire


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

          Commentaire


          • #6
            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

            Commentaire


            • #7
              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) :

              Code:
              @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 ?
              Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et en téléchargement les fichiers de traduction Fr (non officiel) d'Akeeba Backup 9 (traduction par RoberG) et de Kickstart Core (par moi-même).

              Commentaire


              • #8
                Envoyé par Helloo

                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.
                Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et en téléchargement les fichiers de traduction Fr (non officiel) d'Akeeba Backup 9 (traduction par RoberG) et de Kickstart Core (par moi-même).

                Commentaire


                • #9
                  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 :

                  Code:
                  media/templates/site/cassiopeia/fonts/nomdevotrefonte
                  4. Toujours dans media, vous devez définir user.css lié à cassiopeia...
                  le chemin exact est :

                  Code:
                  media/templates/site/cassiopeia/css/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)...

                  Code:
                  h1, .h1,
                  h2,
                  .h2,
                  h3,
                  .h3,
                  h4,
                  .h4,
                  h5,
                  .h5,
                  h6,
                  .h6 {
                  font-family: "nomdevotrefonte", "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 )


                  Dernière édition par daneel à 09/08/2022, 11h31
                  schtroumph et aiment ceci.
                  Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                  Commentaire


                  • #10
                    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


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

                    Cliquez sur l'image pour l'afficher en taille normale  Nom : font.gif  Affichages : 0  Taille : 27,0 Ko  ID : 2041934

                    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 !
                    Dernière édition par daneel à 10/08/2022, 05h13
                    Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                    Commentaire


                    • #11
                      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 ?

                      Commentaire


                      • #12
                        Tu aurais un lien vers le site en construction ?
                        Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et en téléchargement les fichiers de traduction Fr (non officiel) d'Akeeba Backup 9 (traduction par RoberG) et de Kickstart Core (par moi-même).

                        Commentaire


                        • #13
                          Bonjour,

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

                          Merci

                          Commentaire


                          • #14
                            Envoyé par highjumper211 Voir le message

                            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

                            Code:
                            @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...
                            Dernière édition par daneel à 12/08/2022, 05h35
                            Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                            Commentaire


                            • #15
                              Super Merci Daneel

                              Merci pour tes explications. Je vais regarder cela demain

                              Encore un grand merci

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X