[RESOLU] Problème @font-face sous firefox

bonjour tout le monde,

Alors voici je vous soumets un problème que je n'arrive vraiment pas à régler. j'essaie de placer ma propre police sur un site et cela ne fonctionne pas....et je ne comprends vraiment pas où est le problème.
voici le css:

@font-face {
font-family:tradelight;
src:local(tradegothicltstd-light-webfont), local(tradegothicltstd-light-webfont), 
url('http://www.emiliepedron.com/fonts/tradegothicltstd-light-webfont.woff') format(woff), 
url('http://www.emiliepedron.com/fonts/tradegothicltstd-light-webfont.eot'),
url('http://www.emiliepedron.com/fonts/tradegothicltstd-light-webfont.ttf') format(truetype), 
url('http://www.emiliepedron.com/fonts/tradegothicltstd-light-webfont.svg#webfont') format(svg);
}

@font-face {
	font-family: TradeLightObl;
	src:local(TradeGothicLTStd-Light-Obl), local(TradeGothicLTStd-Light-Obl),
	url('http://www.emiliepedron.com/fonts/TradeGothicLTStd-Light-Obl.eot'),
	url('http://www.emiliepedron.com/fonts/TradeGothicLTStd-Light-Obl.woff') format('woff'), 
	url('http://www.emiliepedron.com/fonts/TradeGothicLTStd-Light-Obl.ttf') format('truetype'), 
	url('http://www.emiliepedron.com/fonts/TradeGothicLTStd-Light-Obl.svg') format('svg');
}

@font-face {
	font-family: TradeBold;
	src:local(TradeGothicLTStd-Bold), local(TradeGothicLTStd-Bold),
	url('http://www.emiliepedron.com/fonts/TradeGothicLTStd-Bold.eot'), 
	url('http://www.emiliepedron.com/fonts/TradeGothicLTStd-Bold.woff') format('woff'),
	url('http://www.emiliepedron.com/fonts/TradeGothicLTStd-Bold.ttf') format('truetype'),
	url('http://www.emiliepedron.com/fonts/TradeGothicLTStd-Bold.svg') format('svg');

}

merci d'avance pour vos réponses!
Modifié par hophop (20 Apr 2011 - 23:39)

Salut,

Je crois que la typo doit être déclarée entre guillemets…

@font-face { 
font-family:"tradelight";
// etc…
}

Et sinon tu nous montres uniquement la déclaration font-face, mais pas comment tu as utilisé cette typo ?
Modifié par ZeB_panam (19 Apr 2011 - 13:51)

Salut,

Pourquoi, à chaque fois, deux déclarations de la fonction local() qui font doublon ?

merci pour votre aide!

@ZeB_panam
pour ce qui est des guillemets, cela ne joue pas mais j'en ai mis.
Je n'ai pas mis le contexte du code, car c'est plutôt classique comme emploi, avec une affectation font-family:"tradelight"; sur les balises intéressées.
Du style

body {
background: rgb(240,237,231);
font-family: "tradelight", arial;
color:rgb(138,118,88);
font-size:.75em;
height:100%;
width: 100%;
letter-spacing:.081em;
margin:0;
}

@Victor BRITO
J'ai enlevé le doublon, j'avais vu ça sur un site mais c'est vrai que je ne vois pas la différence!

Merci encore...c'est tout de même intriguant...

ok, j'ai plus ou moins trouvé la solution mais pas vraiment...

ça marche lorsque j'enlève la propriété:

url('http://www.emiliepedron.com/fonts/tradegothicltstd-light-webfont.svg#webfont') format(svg);

mais ensuite, c'est sous Safari que ça ne marche plus...
tous ceci me laisse quand même un drôle d'avis...
Modifié par hophop (19 Apr 2011 - 17:00)

Quelques pistes ici : http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
(notamment le fait que Paul Irish déclare l'eot sur un ligne distincte)
et une page de démo ici : http://dl.dropbox.com/u/39519/webfontsdemo/index.html

Bonjour

Perso j'utilise le service de générateur de fontsquirrel et je n'ai jamais eut de soucis. Il te génère le code et tu as une page test. Le lien pourrait peut-être t'être utile : http://www.fontsquirrel.com/fontface/generator

Merci beaucoup!

effectivement ZeB_panam, le fait d'avoir déclarer l' eot sur une ligne distincte a tout changé!
merci pour les solutions ZeB_panam et InpIxelItrust!

Modifié par hophop (20 Apr 2011 - 23:39)