[RESOLU] @font-face et firefox 4

Bonjour à tous,

j'utilise @font-face sur un site.
tout fonctionné correctement (IE8, FX3 etc...) mais depuis que j'ai fais la mise à jour de FireFox 4, le @font-face n'est plus reconnu avec FX 4 alors que tout fonctionné correctement avec la version FX3 ?

Seriez vous pourquoi ? merci
Modifié par Kweb (09 May 2011 - 10:10)

Bonjour,

@font-face fonctionne très bien sur Firefox 4.
Malheureusement, sans exemple en ligne ni code, nous ne pourrions qu'essayer de deviner comment tu as procédé et je ne suis pas sûr de parvenir à un résultat

Oups !! effectivement

donc voila la feuille de style

@font-face {
	font-family: 'bebasneue';
	src: url('lib/font-face/bebasneue-webfont.eot');
	src: local('@'), url('lib/font-face/bebasneue-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

h2 { font-family:'BebasNeue'; margin:0; letter-spacing:1px; color:#a7a7ac; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.3);}

Modifié par Kweb (05 May 2011 - 16:57)

Bonjour,

Sûrement mieux comme ça

src: local('@'), url('lib/font-face/bebasneue-webfont.eot'), url('lib/font-face/bebasneue-webfont.ttf') format('truetype'); 

Malheureusement ça ne change pas grand chose...
Pour être sur que mon problème ne soit pas lié spécifiquement à mon navigateur (FX 4).
pourriez vous contrôler de votre coté si l'affichage est le même entre Chrome et Firefox.
au niveau des titres "LISTE DES PARTICIPANTS" / "CONSULTER LES RESULTATS" / "LE LIVRE D'OR" qui doivent utilisé @face-font

http://tropheedelaravet2000.siffrein-blanc-assurances.fr

En vous remerciant

ça marche très bien sur Fx4

Tu as du malencontreusement refusé l'import de police sur ce site avec ton navigateur. c'est une supposition.

Bon super, cela me rassure....
Mais le refus d'import de police via FX4,c'est un paramétrage spécifique de FX4 ?

Merci

Non ça l'était déjà sous les versions précédentes de Firefox , mais bon moi aussi à ma grande surprise l'autorisation des sites à utiliser leurs propres polices n'était pas cochée, je commençais à croire que Firebug était incapable d'indiquer la police utilisée vu qu'il m'indiquait invariablement 'serif'.
soit j'avais désactiver cela avant sous FF3 soit c'est l'importation du profil existant de FF3 (Iceweasel en fait ) qui ne s'était pas bien passé ....

Là c'est ok pour ton site une fois autorisé l'importation des polices :
Firebug m'indique bien

a écrit :
font-family 'BebasNeue'

Là tout de suite ça ne marche ni sur Firefox 4, ni sur Chrome 11.

La déclaration @font-face dans les styles CSS:
- Existe en plusieurs exemplaires dont deux sont commentés.
- La version qui n'est pas commentée ne définit pas le nom de la fonte. Du coup Firefox n'essaie même pas de récupérer le fichier TTF référencé ainsi.
- Est déclarée dans la troisième feuille de styles (styles.css), alors qu'on cherche à utiliser la fonte dès la première (structure.css).
- Par ailleurs le chemin vers les fichiers semble mauvais ("lib/..." au lieu de "/lib/...").
- Et même avec un chemin correct, le fichier TTF renvoie un Content-Type "text/plain". Il va falloir configurer ce serveur correctement (et prendre l'habitude de vérifier les en-têtes HTTP... quitte à apprendre des rudiments de HTTP s'ils ne sont pas connus!).

Avec tout ça, ça peut vraiment pas marcher.

Et aussi:
- Toujours déclarer une famille de fonte générique, et si possible un fallback. Donc pas font-family: "Machin";, mais font-family: "Machin", Arial, sans-serif; (par exemple).
- Si tu définis ta fonte comme étant font-weight:normal dans le @font-face, mieux vaut l'utiliser pour des textes qui sont eux-mêmes en font-weight:normal. Donc attention aux titres qui sont en font-weight:bold par défaut. (Ceci dit, les navigateurs peuvent réagir différemment face à ce genre d'incohérence.)
Modifié par fvsch (06 May 2011 - 13:36)

effectivement ça a pas l'air de marcher pour l'instant ...
sinon tu peux t'inspirer de l'exemple de fontsquirrel
Le package font-face est sympa aussi

Encore merci pour vos commentaires constructif.

Tout semble marcher correctement...