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

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!

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

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.

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

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