28172 sujets

CSS et mise en forme, CSS3

@font-face ne fonctionne que sur chrome ....

Bonjour à tous,
Après moults recherches, je ne comprends pas pourquoi l'affichage d'une police exotique appelée par @font-face ne fonctionne que sur chrome ?
Je teste sur firefox 3.6.10 et sur IE8 et elle n'apparaît pas, auriez-vous une idée ?
Merci d'avance Smiley cligne
Bonjour,

cassius77 a écrit :
Je teste sur firefox 3.6.10 et sur IE8 et elle n'apparaît pas, auriez-vous une idée ?
Ma boule de crystal te conseille de regarder dans le bac à glaçon du congel...

Pour une réponse plus précise, veuillez insérer un exemple (code ou pas en ligne)
merci de ta réponse, en fait mon site est sous loggin c'est pour ça que je n'ai pas laissé le lien, mais sinon mon code css est :
(Attention l'url du site en question n'est pas celle ou se trouve la police)
"
@font-face { 
    font-family: "Fontdinerdotcom Loungy"; 
    src: url("http://robertoandthemoods.free.fr/fonts/FontdinerdotcomLoungy.ttf") format("truetype"); 
} 
...
#container .element-header b, .side-nav-box td.header, #container .element-header {
font-weight:bold;
font-family:"Fontdinerdotcom Loungy";
font-size:30px;
color:#ffffff;
text-shadow: 0px 0px 5px #990000;  
}

Modifié par cassius77 (30 Sep 2010 - 14:04)
Il est possible que les autres navigateurs ne puisse récupérer la police si elle ne se trouve pas sur le même serveur que le site.
Merci, il me semblait bien que c'était le fait que la police était hébergé sur un autre serveur qui posait problème....
En revanche, comment ce fait-il que cela fonctionne sous chrome ?
Ça dépend d'un navigateur à l'autre… Solution: si c'est autorisé, copie la fonte sur ton site. Pour les autres navigateurs, relis mon message plus avant.
Florian_R a écrit :
Hello...

+1 pour Laurie-Anne,

Il faut que le serveur qui héberge les polices rajoute une directive dans son htaccess.

Voir http://wnas.nl/font-face-not-working-with-faulty-otf


je suis allé voir, je sais pas si j'ai tout compris mais j'ai rajouté un fichier .htacces dans mon dossier qui contient la police dans lequel j'ai inséré stricto sensu : 

<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

@Patidou: je vais rajouter des.eot pour Ie8 merci.
Le htaccess doit être placé sur le serveur qui host les font.

En gros, tu ne peux pas utiliser des fichiers venant d'un autre site sans autorisation du site en question. Outre la contrainte technique, ce n'est pas très éthique (tu utilises la bande passante d'un autre).

La seule solution c'est de copier les fichiers de font sur ton serveur, à condition que les font soient libre de droits !
En fait c'est justement le problème, je ne peux pas uploader de fichier sur le serveur c'est un cms/reseau social en ligne. Du coup je pensais déposer la police sur mon serveur perso chez free.
J'avais bien placé le htacces sur le serveur qui héberge mes fonts puisqu'il m'appartrient mais cela ne marchait pas quand même.

En fait, je ne sais pas si c'est réellement ça le problème, parceque sur chrome cela fonctionne.

J'ai recréé un simuli de mon problème sur une adresse publique :

http://robertocss.spruz.com

Si on l'ouvre via chrome: la police du titre h1 du site est bien la bonne en revanche sur firefox nada....

Pour info, impossible de retrouver la propriété @font-face avec firebug ....
Encore une fois les fontes ne sont pas sur le même domaine que ton site donc ça ne marchera pas. De plus, tu n'utilises pas plusieurs formats pour cibler un maximum de navigateurs. Regarde sur mon site pour avoir un exemple, les fontes s'affichent dans IE, Firefox, Safari, Chrome, Opera et même Safari Mobile grâce au format SVG.

@font-face {
    font-family: 'YanoneKaffeesatzRegular';
    src: url('fonts/yanonekaffeesatz-regular-webfont.eot');
    src: local('&#9786;'), url('fonts/yanonekaffeesatz-regular-webfont.woff') format('woff'), url('fonts/yanonekaffeesatz-regular-webfont.ttf') format('truetype'), url('fonts/yanonekaffeesatz-regular-webfont.svg#webfontMk6dIcMg') format('svg');
    font-weight: normal;
    font-style: normal;
}


P.S. : il y trop de fichiers css dans ta page. Smiley sweatdrop

P.S. 2: le &#9786; est un smiley qui ne s'affiche pas sur le forum.
Modifié par Patidou (04 Oct 2010 - 12:45)
Patidou a écrit :
Encore une fois les fontes ne sont pas sur le même domaine que ton site donc ça ne marchera pas. De plus, tu n'utilises pas plusieurs formats pour cibler un maximum de navigateurs. Regarde sur mon site pour avoir un exemple, les fontes s'affichent dans IE, Firefox, Safari, Chrome, Opera et même Safari Mobile grâce au format SVG.

@font-face {
    font-family: 'YanoneKaffeesatzRegular';
    src: url('fonts/yanonekaffeesatz-regular-webfont.eot');
    src: local('&#9786;'), url('fonts/yanonekaffeesatz-regular-webfont.woff') format('woff'), url('fonts/yanonekaffeesatz-regular-webfont.ttf') format('truetype'), url('fonts/yanonekaffeesatz-regular-webfont.svg#webfontMk6dIcMg') format('svg');
    font-weight: normal;
    font-style: normal;
}


P.S. : il y trop de fichiers css dans ta page. Smiley sweatdrop

P.S. 2: le &#9786; est un smiley qui ne s'affiche pas sur le forum.


Je suis d'accord pour les formats mais pourquoi cela fonctionne sous chrome ?
Sujet clos
Aller à