css @font-face avec police ttf

Question

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.

Mortimer59 · Accepted Answer

utiliser url:("file://le dossier/police.ttf")

Christounet · Answer

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

Luc · Answer

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

Christounet · Answer

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

Luc · Answer

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

Luc · Answer

Ç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.

Mortimer59 · Answer

en effet src: url ne fonctionne pas en css voir http://jigsaw.w3.org/css-validator/ pour voir tes erreurs.

Exagone · Answer

Et on peux le faire avec les fichiers ".ttf" ???

Mortimer59 · Answer

Oui sans problème c'est ce que je fais sur mon site.

Valéry · Answer

À 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

lelouch · Answer

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

notobe · Answer

font-face n'est pas une balise.. c'est un sélecteur CSS

https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html
http://css.mammouthland.net/font-css-polices-caracteres.php#font-face

devWoueb · Answer

je vous conseille de regarder ce tuto : http://www.papiersdundev.com/tuto-css3-font-face-en-bref/

messi10 · Answer

messi--belle@hotmail.com

Twist · Answer

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;
}

prosthetiks · Answer

Hello,  

Utilise https://www.fontsquirrel.com/tools/webfont-generator, il converti tes polices et te génère le css

Css @font-face avec police ttf

16 réponses

Discussions similaires

Newsletters