Question autour de font-face!

Résolu

Tlaloka -
Skiio Messages postés 248 Date d'inscription Statut Membre Dernière intervention - 30 juin 2015 à 16:45

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!

A voir également:

Question autour de font-face!
Google earth autour de moi - Guide
Supermarché le moins cher autour de moi - Accueil - Services en ligne
Marketplace autour de moi - Guide
Face time - Guide
Panne internet autour de moi - Accueil - Outils

4 réponses

Réponse 1 / 4

Skiio Messages postés 248 Date d'inscription Statut Membre Dernière intervention 41

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.

Réponse 2 / 4

Tlaloka

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 Messages postés 248 Date d'inscription Statut Membre Dernière intervention 41

C'est quoi le chemin (l'URL) de ton CSS ?

Skiio Messages postés 248 Date d'inscription Statut Membre Dernière intervention 41 > Skiio Messages postés 248 Date d'inscription Statut Membre Dernière intervention

Tu utilise quoi comme moteur de recherche ?
Car je sais qu'avec Mozilla c'est un peu le bordel et il a des fois d'autre chose à faire.

Tlaloka

Le chemin de mon css est le même que "web fonts": H:\Site web\Deuxième activité/css
J'utilise Google chrom!

Skiio Messages postés 248 Date d'inscription Statut Membre Dernière intervention 41 > Tlaloka

Ok patiente quelque seconde je test

Réponse 3 / 4

Skiio Messages postés 248 Date d'inscription Statut Membre Dernière intervention 41

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 :

<!DOCTYPE html>
<html>
    <head>
		<!-- En-tête de la page -->

        <meta charset="utf-8" />
		
		<!-- Mise en page -->

		<link rel="stylesheet" href="css.css" type="text/css" />

		
        <title>Page1</title>
			
    </head>

    <body>
		
		<h1> <a class="titre" >Le Titre </a> </h1> 
	
		
    </body>
</html>

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

Réponse 4 / 4

Tlaloka

Cela marche enfin!!!! 1000 merciiiiis à ???Skiio???

Bonne journée :)

Skiio Messages postés 248 Date d'inscription Statut Membre Dernière intervention 41

De rien, pense à mettre de sujet en résolu ;)

Bonne fin de journée et bonne programmation ^^

Discussions similaires

piratage compte facebook

Le code postal d Dakar

Pourquoi cercle violet sur snapchat

Votre réponse

Discussions similaires