Question autour de font-face! Résolu

Question

Bonjour;

Je m'initie depuis peu au css3, et j'ai comme un problème avec font-face. 
J'utilise le kit de "fontsquirrel" pour mes polices, je prends le code css, le copie sur mon fichier de styles, j'applique le font-family qui correspond, je décompresse le zip dans le même dossier où se trouve mon fichier css (je prends que le dossier qui contient 6 sous-dossiers), rien ne se passe sur ma page web, je copie alors les 6 sous-dossiers directement, mais toujours rien sur ma page! Ma question est: suis-je obligée de décompresser le moindre petit fichier dans le même dossier que mon css (je risque de me trouver avec une trentaine d'éléments), pour pouvoir enfin voir ma police appliquée à ma page?

Merci d'avance!

Skiio · Answer

Bonjour,
Je te montre l'exemple pour mon site : @charset "utf-8";

@font-face {
    font-family: 'ShortStack-Regular';
	
    src: url('ShortStack-Regular.eot') format('eot'),
         url('ShortStack-Regular.woff') format('woff'),
         url('ShortStack-Regular.woff2') format('woff2'),
         url('ShortStack-Regular.ttf') format('truetype'),
	 url('ShortStack-Regular.afm') format('afm'),
	 url('ShortStack-Regular.cff') format('cff'),
	 url('ShortStack-Regular.dfont') format('dfont'),
	 url('ShortStack-Regular.otf') format('otf'),
	 url('ShortStack-Regular.pfa') format('pfa'),
	 url('ShortStack-Regular.pfb') format('pfb'),
	 url('ShortStack-Regular.pfm') format('pfm'),
	 url('ShortStack-Regular.ps') format('ps'),
	 url('ShortStack-Regular.pt3') format('pt3'),
	 url('ShortStack-Regular.suit') format('suit'),
	 url('ShortStack-Regular.t42') format('t42'),
	 url('../fonts/ShortStack-Regular.tfm') format('tfm'),
         url('/fonts/ShortStack-Regular.svg') format('svg');
	
	font-weight: normal;
        font-style: normal;
}

Ligne 6 j'ai le Nom de ma police.
Ligne 8 à 22 c'est si tes format de police sont tous à la même racine.
Ligne 23 c'est un exemple pour un format de police ce trouvant dans le dossier précédent celui où ce trouve ton CSS
Ligne 24 c'est un exemple pour un format de police ce trouvant dans le dossier "fonts" qui ce trouve dans le dossier actuel de ton CSS.

Test comme ça (comme la ligne 24) et dit moi si ça fonctionne. 
Sinon envoie ton code que je regarde avec toi.

Tlaloka · Answer

Merci pour la réponse rapide :)

J'ai essayé en mettant le chemin des fichiers, mais ça ne donne toujours rien:

h1
{
	color: #8d2570;
	
	text-align: center;
	
	font-family: 'new_ciclefina'; 
}

@font-face {
    font-family: 'new_ciclefina';
    src: url('H:\Site web\Deuxième activité/web fonts/New_Cicle_Fina-webfont.eot');
    src: url('H:\Site web\Deuxième activité/web fonts/New_Cicle_Fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('H:\Site web\Deuxième activité/web fonts/New_Cicle_Fina-webfont.woff') format('woff'),
         url('H:\Site web\Deuxième activité/web fonts/New_Cicle_Fina-webfont.ttf') format('truetype'),
         url('H:\Site web\Deuxième activité/web fonts/New_Cicle_Fina-webfont.svg#new_ciclefina') format('svg');
    font-weight: normal;
    font-style: normal;

}


Voici la police que j'ai utilisée:
http://www.fontsquirrel.com/fonts/New-Cicle

Où est l'erreur?

Skiio · Answer

Alors voila j'ai réussi. Dans un premier temps tu met tout au même endroit, comme ceci : - Dans "Site web\Deuxième activité" tu met le dossier web fonts + css.css + Page.html - Dans web fonts tu laisse tes 6 dossier sans y toucher. (décompresse tout de même le dossier web fonts) Ensuite dans Page.html : Page1

Le Titre

Et enfin dans css.css : h1 { color: #8d2570; text-align: center; font-family: 'new_ciclefina'; } @charset "utf-8"; @font-face { font-family: 'new_ciclefina'; src: url('web fonts/newcicle_fina_macroman/New_Cicle_Fina-webfont.eot'); src: url('web fonts/newcicle_fina_macroman/New_Cicle_Fina-webfont.eot?#iefix') format('embedded-opentype'), url('web fonts/newcicle_fina_macroman/New_Cicle_Fina-webfont.woff') format('woff'), url('web fonts/newcicle_fina_macroman/New_Cicle_Fina-webfont.ttf') format('truetype'), url('web fonts/newcicle_fina_macroman/New_Cicle_Fina-webfont.svg#new_ciclefina') format('svg'); font-weight: normal; font-style: normal; } Ça devrai marcher, du moins pour moi ça fonctionne. Tiens moi au courant :)

Tlaloka · Answer

Cela marche enfin!!!! 1000 merciiiiis à  ???Skiio??? 

Bonne journée :)

Question autour de font-face!

4 réponses

Discussions similaires

Newsletters