Css @font-face avec police ttf

Luc -  
 Twist -
Bonjour,
j'ai créé une page de mon site avec une police Chiller Normal (true type) dont le nom de fichier dans le répertoire des polices de mon pc est chiller.ttf.
Dans mes CSS j'avais
.Conteneur { (...) font-family: Chiller;}
et mon texte apparait bien sur mon PC avec cette police.

Mais cette police n'existe par sur d'autres PC. Il en va ainsi d'un autre PC que j'ai ici (PC2). Après m'être renseigné sur diverses pages, j'ai rajouté dans ma feuille de style, au début :
@font-face { font-family:"Chiller"; src:local("Chiller Normal"), src:url("styles/chiller.ttf") format("TrueType"); }
Dans le répertoire styles, j'ai mis le fichier chiller.ttf

Malheureusement, je n'arrive à aucun résultat sur PC2. Le texte n'apparait pas en police CHiller.

Quelqu'un aurait-il une idée du problème ?

Merci.
A voir également:

16 réponses

Mortimer59 Messages postés 139 Date d'inscription   Statut Membre Dernière intervention   12
 
utiliser url:("file://le dossier/police.ttf")
5
Christounet Messages postés 1264 Date d'inscription   Statut Membre Dernière intervention   1 392
 
Bonjour,

Sorry, je n'avais pas lu l'article jusqu'au bout, je pense alors que le problème vient de src:url("styles/chiller.ttf").

Je pense que tu dois rajouter "../" dans url, celà donnerait donc src:url("../styles/chiller.ttf") si Styles est un sous-répertoire du répertoires contenant ta page html

A plus
2
Christounet Messages postés 1264 Date d'inscription   Statut Membre Dernière intervention   1 392
 
Bonjour,

Je pense que tu dois d'abort convertir ton fichier ttf vers le format EOT (Windows) ou PFR (Mozilla/Firefox), en suivant le lien ci-dessous tu trouveras toute une documentation concernant l'ajoute de police dans les pages HTML ou fichiers CSS:

http://fr.selfhtml.org/internationalisation/polices_telechargeables.htm

A plus
1
Luc
 
Ça na marche pas mieux avec src:url("../styles/chiller.ttf")
Je me suis rabattu sur le logiciel Microsoft Weft qui m'a converti les polices pour IE et proposé directement le code CSS à utiliser. Très pratique et ça fonctionne sur le PC2 qui utilise IE. Reste à les convertir en pfr.
Merci.
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Mortimer59 Messages postés 139 Date d'inscription   Statut Membre Dernière intervention   12
 
en effet src: url ne fonctionne pas en css voir http://jigsaw.w3.org/css-validator/ pour voir tes erreurs.
1
Valéry
 
À ma connaissance Firefox 2.0.0.10 et IE7 mentionnés ans le message ne prennent pas en compte @font-face : il faut Safari 4, Opera 10 ou Firefox 3.5
1
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
1
Twist
 
Un petit exemple vaut mieux qu'un long discours :

@font-face {
font-family: "Hybrid";
src: url('./fonts/Hybrid.ttf');
}

h1 {
color: blue;
font-size: 30px;
font-family: Hybrid;
}
1
Twist
 
Et en complément vous avez ici les navigateurs qui supportent les polices de TTF via la déclaration @font-face :
http://caniuse.com/#feat=ttf
0
Luc
 
J'ai en effet vu ces méthodes mais j'ai vu plusieurs exemples où on semble utiliser directement ttf
Voir
http://fr.selfhtml.org/css/proprietes/fichier_police.htm
à la rubrique Autres mentions sur la source de police
0
Luc
 
Je suis un peu dubitatif (j'ai essayé avec l'url complète correspondant à l'endroit pù est stocké le fichier sur le site) concernant cette solution mais j'essayerais... mardi prochain quand je serais de nouveau sur place.
Merci.
Luc
0
Exagone
 
Et on peux le faire avec les fichiers ".ttf" ???
0
Mortimer59 Messages postés 139 Date d'inscription   Statut Membre Dernière intervention   12
 
Oui sans problème c'est ce que je fais sur mon site.
0
lelouch
 
Bonjour je sais pas si quelqu'un va répondre mes voila je voudrais utiliser la balise font-face pour mon site pour mettre une police spécial mes je la comprend pas très bien qui pourrai m'aider
0
devWoueb
 
je vous conseille de regarder ce tuto : http://www.papiersdundev.com/tuto-css3-font-face-en-bref/
0
messi10
 
messi--belle@hotmail.com
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Hello,

Utilise https://www.fontsquirrel.com/tools/webfont-generator, il converti tes polices et te génère le css
0
Twist
 
Pas mal comme outil !
Je connaissait pas et çà part direct dans les gavoris :)
Ca peut-être bien utile pour certains projets quand tu as des obligations de compatibilité sur les vieux browsers
0