Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème de Police exotique

Help !

    18 octobre 2021 à 15:26:44

    Bonjour à tous !

    Nouveau dans la communauté, j'arrive d'habitude à régler mes problèmes seul, mais là, je sèche un peu.

    Je souhaiterai intégrer deux Polices exotiques sur ma page html. Je l'ai donc rajouter sur ma feuille CSS, comme ceci.

    @font-face {
    
        font-family: 'lemon_milklight';
    
        src: url('C:\test\Cours\AIDB\webfontkit-20211018-083854.zip/lemonmilk-light-webfont.woff2') format('woff2'),
    
             url('C:\test\Cours\AIDB\webfontkit-20211018-083854.zip/lemonmilk-light-webfont.woff') format('woff');
    
        font-weight: normal;
    
        font-style: normal;
    
    }
    
    @font-face {
    
        font-family: 'caviar_dreamsbold';
    
        src: url('Caviar_Dreams_Bold-webfont.eot');
    
        src: url('Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
    
             url('Caviar_Dreams_Bold-webfont.woff2') format('woff2'),
    
             url('Caviar_Dreams_Bold-webfont.woff') format('woff'),
    
             url('Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
    
             url('Caviar_Dreams_Bold-webfont.svg#caviar_dreamsbold') format('svg');
    
        font-weight: normal;
    
    }

    Seulement voilà, je ne sais pas vraiment quoi faire après. Pouvez-vous m'aider ?

    Merci d'avance !

    -
    Edité par Jean-BaptisteNewton 18 octobre 2021 à 15:27:47

    • Partager sur Facebook
    • Partager sur Twitter
      18 octobre 2021 à 15:41:39

      Bonjour,

      Ton soucis se situe au niveau des tes liens d'appel à ta typo. Même si tu es en local, tes liens ne devrais jamais commencer par la lettre de ton disque. Une fois que ton site sera en ligne, ces liens ne fonctionnera pas!

      Donc, ne copie/colle jamais tes liens depuis ta fenêtre Windows.

      Si tu retire C:\ et que tu remplaces tous les autres antislash tu devrais voir ta police -> /test/Cours/AIDB/webfontkit-20211018-083854.zip/lemonmilk-light-webfont.woff2

      Attention! Je vois dans l'url que tu charges ta typo depuis un fichier ZIP. Cela est impossible! Il te faut extraire le contenu de ton ZIP!

      • Partager sur Facebook
      • Partager sur Twitter

      Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

        18 octobre 2021 à 16:06:08

        Ah ok, Merci Lord Morpheus (promis je prend la petite pilule bleu en partant) !

        Et comment j'intègre ma typo du coup ? Voici ce que j'ai fait

           @font-face {
            font-family: 'lemon_milklight';
            src: url('test/Cours/AIDB/Police/webfontkit-20211018-083854/lemonmilk-light-webfont.woff2') format('woff2'),
                 url('test/Cours/AIDB/Police/webfontkit-20211018-083854/lemonmilk-light-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face {
            font-family: 'caviar_dreamsbold';
            src: url('test/Cours/AIDB/Police/webfontkit-20211018-083854/Caviar_Dreams_Bold-webfont.eot');
            src: url('test/Cours/AIDB/Police/webfontkit-20211018-083854/Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
                 url('test/Cours/AIDB/Police/webfontkit-20211018-083854/Caviar_Dreams_Bold-webfont.woff2') format('woff2'),
                 url('test/Cours/AIDB/Police/webfontkit-20211018-083854/Caviar_Dreams_Bold-webfont.woff') format('woff'),
                 url('test/Cours/AIDB/Police/webfontkit-20211018-083854/Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
                 url('test/Cours/AIDB/Police/webfontkit-20211018-083854/Caviar_Dreams_Bold-webfont.svg#caviar_dreamsbold') format('svg');
            font-weight: normal;
        }

        -
        Edité par Jean-BaptisteNewton 18 octobre 2021 à 16:06:53

        • Partager sur Facebook
        • Partager sur Twitter
          18 octobre 2021 à 16:27:53

          En l'état tu ne vois toujours pas ta police?

          Sinon il te suffit de déclarer ta police là où tu souhaite qu'elle s'affiche, par exemple sur le body (et donc sur tout le site) :

          body{
          font-family: 'lemon_milklight';
          }

          Si tu ne vois toujours pas ta police, c'est que le chemin d'appel dans ton CSS n'est pas bon.

          Pour trouver ton chemin, tu part de ton fichier CSS (où tu appel tes polices) et tu parcours le chemin jusqu'à ton fichier de police.

          Si tout ton site se trouve dans ton dossier Cours , on devrais par exemple y trouver un dossier CSS et Police avec l'intérieur de chacun les fichiers correspondant. Je part du principe que ton dossier AIDB n'existe pas dans mon exemple.

          Donc avec cet exemple, l'appel à ta police dans ton CSS serai : ../Police/webfontkit-20211018-083854/lemonmilk-light-webfont.woff2

          Explication du lien : je suis dans le dossier CSS et je remonte d'un dossier en arrière pour arriver dans le dossier Cours, ce qui correspond à ../ Ensuite, je vais dans le dossier Police, ce qui correspond à Police/ Et enfin, j'affiche le nom de mon fichier avec son extension.

          • Partager sur Facebook
          • Partager sur Twitter

          Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

            18 octobre 2021 à 17:13:47

            Toujours le même problème, pourtant, j'ai chercher dans ma table de commande comme ceci

            jeanb@GunZii /cygdrive/c/test/Cours/AIDB/Police
            $ ls .
            caviardreams_bold-demo.html            lemonmilk-bold-webfont.woff2
            caviardreams_bolditalic-demo.html      lemonmilk-light-demo.html
            caviardreams_bolditalic-webfont.woff   lemonmilk-light-webfont.woff
            caviardreams_bolditalic-webfont.woff2  lemonmilk-light-webfont.woff2
            caviardreams_bold-webfont.woff         lemonmilk-medium-demo.html
            caviardreams_bold-webfont.woff2        lemonmilk-medium-webfont.woff
            caviardreams_italic-demo.html          lemonmilk-medium-webfont.woff2
            caviardreams_italic-webfont.woff       lemonmilk-regular-demo.html
            caviardreams_italic-webfont.woff2      lemonmilk-regularitalic-demo.html
            caviardreams-demo.html                 lemonmilk-regularitalic-webfont.woff
            caviardreams-webfont.woff              lemonmilk-regularitalic-webfont.woff2
            caviardreams-webfont.woff2             lemonmilk-regular-webfont.woff
            generator_config.txt                   lemonmilk-regular-webfont.woff2
            lemonmilk-bold-demo.html               stylesheet.css
            lemonmilk-bold-webfont.woff            webfontkit-20211018-083854
            

            J'ai donc copier-collé comme ceci 

            @font-face {
                font-family: 'lemon_milklight';
                src: url('test/Cours/AIDB/Police/lemonmilk-light-webfont.woff2') format('woff2'),
                     url('test/Cours/AIDB/Police/lemonmilk-light-webfont.woff') format('woff');
                font-weight: normal;
                font-style: normal;
            }
            
            @font-face {
                font-family: 'caviar_dreamsbold';
                src: url('test/Cours/AIDB/Police/Caviar_Dreams_Bold-webfont.eot');
                src: url('test/Cours/AIDB/Police/Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
                     url('test/Cours/AIDB/Police/Caviar_Dreams_Bold-webfont.woff2') format('woff2'),
                     url('test/Cours/AIDB/Police/Caviar_Dreams_Bold-webfont.woff') format('woff'),
                     url('test/Cours/AIDB/Police/Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
                     url('test/Cours/AIDB/Police/Caviar_Dreams_Bold-webfont.svg#caviar_dreamsbold') format('svg');
                font-weight: normal;

            Désolé je bloque un peu :'(

            -
            Edité par Jean-BaptisteNewton 18 octobre 2021 à 17:14:45

            • Partager sur Facebook
            • Partager sur Twitter
              18 octobre 2021 à 17:18:10

              Si ton CSS est dans le fichier stylesheet.css

              Vu que maintenant tes polices sont à la racine, tes liens devrait être direct par exemple: url('Caviar_Dreams_Bold-webfont.eot');

              Mais je te conseil de les mettre dans un dossier pour organiser ton arborescence.

              Par exemple tu fait un dossier polices 

              et donc les liens ressembleront à ça : url('polices/ta_police.eot');

              -
              Edité par tomlahaye 18 octobre 2021 à 17:20:32

              • Partager sur Facebook
              • Partager sur Twitter

              Apprenti Technicien Informatique, larubriquedugeek.fr 

              Problème de Police exotique

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown