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.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

    Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

    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.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

              Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

              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.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

                Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

                Commentaire


                • #9
                  Bonjour

                  Exemple avec google font en local...



                  1. Dans Google Font, choisissez votre police cursive :


                  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:
                  [B]media/templates/site/cassiopeia/fonts/[/B]nomdevotrefonte
                  4. Toujours dans media, vous devez définir user.css lié à cassiopeia...
                  le chemin exact est :

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

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


                  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


                    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



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



                    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.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

                        Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

                        Commentaire


                        • #13
                          Bonjour,



                          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
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X