18041 sujets

Questions générales et questions de débutants

Problème avec Font-face et Firefox

Bonjour chere Alsanaute !

Tout d'abord un cour merci pour l'incontournable AlsacreationS qui est une référence en la matiere et une source d'inpisration pour moi.

Je ne m'étalerai pas plus sur le hors sujet, j'en viens à ma question, Je suis en train de recommencer (encore) mon site perso, et de tester ce que m'offre l'HTML 5 et le CSS 3. Cependant j'ai un petit problème:

La propriété font-face ne fonctionne pas sous firefox, j'ai recherché sur le forum et sur le net mais je n'ai pas trouver de réponse satisfaisante. Firefox prend-t-il en compte cette propriété ou fait-il tout simplement l'impasse dessus?

J'ai suivi les conseils que j'avais lu dans un autre poste et j'ai utilisé Font Squirrel, malheureusement toujours pas de modification sur FF.

Pouvez-vous me confirmez qu'il faudra attendre encore un peu avant que FF implémente cette propriété, ou alors l'erreur vient-elle de moi ?

J'ajoute ci dessous mon code :


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 9, 2010 */
@font-face {
	font-family: 'PopStarAutographRegular';
	src: url('popstarautograph-webfont.eot');
	src: local('?'), url('font/popstarautograph-webfont.woff') format('woff'), url('font/popstarautograph-webfont.ttf') format('truetype'), url('font/popstarautograph-webfont.svg#webfontN1QKNh8s') format('svg');
	font-weight: normal;
	font-style: normal;
}


Merci d'avance !
Bonjour,

Pas de problème avec @font-face pour FF :

@font-face {
	font-family: 'zapfino';
	src: url('../fonts/zapfino.eot');
	src: local('zapfino'), local('zapfino'), url('../fonts/zapfino.woff') format('woff'), url('../fonts/zapfino.ttf') format('truetype');
}

Pour avoir les différentes version de la police personnellement j'utilise :
http://www.fontsquirrel.com/fontface/generator
Bonjour a toi,

Comme je l'ai écris dans ma question, et dans ma portion de code, j'ai égualement utilisé fontsquirrel.

Malheureusement ca ne fonctionne toujours pas sous FF, Enfin tu m'as fais remarquer une erreur, je n'avais pas précisé le chemin de la premiere propriété src.

Mais bon ca ne fonctionne quand même pas, pourtant sous Chrome ca va ...

Si vous avez une suggestion n'hésitez pas, néanmoins je te remercie de ta réponce
Tu dois avoir une erreur dans ton code, puisque sa fonctionne très bien avec FF, Chrome peut poser problème dans certains cas, dans ce cas supprimer src : local.

les formats reconnus par les différents navigateurs :

* Safari : TTF et OTF
* Chrome : TTF et OTF
* Firefox : TTF et OTF)
* Opéra : TTF, OTF et SVG (format propriétaire Mac OS)
* Internet Explorer : EOT
Je viens de retourner mon code dans tout les sens, et ca ne fonctionne toujours pas.

Mais bon si tu me dis que ca fonctionne correctement sous FF normalement, c'est que j'ai peut être trop travaillé pour aujourd'hui et qu'il vaut mieux remettre ça à demain, l'esprit clair.

Merci de ta vitesse de réponse en tout cas ca fais bien plaisir.

A bientot

Je te tiendrai au courant si je trouve ce qui ne vas pas en cas !
Bonjour,

Ça ne serait pas juste un problème de chemin ?

Tu vas chercher la police "eot" à la racine alors que les autres sont appelées dans le dossier "font".
Carine P a écrit :
Bonjour,

Ça ne serait pas juste un problème de chemin ?

Tu vas chercher la police "eot" à la racine alors que les autres sont appelées dans le dossier "font".

Effectivement, mais dans son cas sa ne fonctionne pas avec FF qui n'utilise pas EOT mais TTF et OTF.

Essaye en mettant tout dans le même dossier :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Font-face</title>
<style type="text/css">
@font-face {
    font-family: 'PopStarAutographRegular';
    src: url('PopStarAutographRegular.eot');
    src: local('PopStarAutographRegular'), local('PopStarAutographRegular'), url('PopStarAutographRegular.woff') format('woff'), url('PopStarAutographRegular.ttf') format('truetype');
}
.font {
    font-family: 'PopStarAutographRegular', Arial, Helvetica, sans-serif;
}
</style>
</head>

<body>
<h1 class="font">Titre</h1>
</body>
</html>

Modifié par 3arly3F (09 Sep 2010 - 19:04)
Ah benh je reviens de chez ma copine, et je vois que ca fonctionne. A mon avis c'était un problème d'actualisation ou de mise en cache.

C'est pas la première fois que FF ne s'actualise pas et garde l'ancien rendu alors que j'ai modifié quelques chose en CSS

Merci de votre aide en tout cas !

PS : je n'arrive pas à mettre le post en "résolu"
Modifié par Gili (10 Sep 2010 - 20:37)
Sujet clos
Aller à