[Résolu] Comportement étrange avec @font-face

[Résolu] Comportement étrange avec @font-face - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Général (https://forum.cmsmadesimple.fr/forum-10.html)
+--- Sujet : [Résolu] Comportement étrange avec @font-face (/thread-1885.html)

[Résolu] Comportement étrange avec @font-face - kerrighan - 05/04/2012

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.10.3
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Ecrivez votre question ici.

Bonjour à tous,

Nouveau sur le forum, je ne sais pas si je poste au bon endroit donc désolé d'avance si je donne du travail aux modérateurs Wink

Je viens de créer un site sous CMSMS (Mon premier) et j'ai constaté un comportement étrange avec les CSS et @font-face et tout particulièrement Firefox

En gros dans mon CSS j'ai bien toutes les entrées sous la forme:

Code :
[== CSS ==]

@font-face {

        font-family: mystyle_bold;

        src: url('[[root_url]]/uploads/mysite/fonts/thefont.eot');

}

Ca fonctionne très bien sauf sous Firefox ou le comportement est le suivant:

Dans mon config.php j'ai:
$config['root_url'] = 'http://www.monsite.fr';

Alors à l'adresse:
www.monsite.fr => OK
monsite.fr => la font ne s'affiche pas

Dans mon config.php j'ai:
$config['root_url'] = 'http://monsite.fr';

Alors à l'adresse:
www.monsite.fr => la font ne s'affiche pas
monsite.fr => OK

Je précise que sous Chrome, IE, et Safari l'affichage est toujours OK peu importe la config!
Quand je vais dans le CSS généré, le lien est bien valable...c'est comme si pour Firefox, il fallait que les fonts soient dans le même domaine pour que ca fonctionne...

Avez vous déjà rencontré ce soucis? j'ai cherché sur le net mais je n'ai trouvé qu'un post ou quelqu'un avait le même soucis mais personne ne lui a répondu Sad

Merci!

[Résolu] Comportement étrange avec @font-face - kerrighan - 05/04/2012

Bon visiblement c'est un restriction connue sous Firefox...

J'ai trouvé 2 solutions:

1- Utiliser le site http://www.fontsquirrel.com/fontface/generator pour intégrer les fonts en base64 dans le css
2- Modifier le .htaccess pour donner accès aux fonts à partir de n'importe où...c'est moins secure mais ça reste la solution la plus simple...Il faut mettre:

Code :
[== Indéfini ==]

<FilesMatch "\.(ttf|otf)$">

<IfModule mod_headers.c>

Header set Access-Control-Allow-Origin "*"

</IfModule>

</FilesMatch>

[Résolu] Comportement étrange avec @font-face - bess - 05/04/2012

Merci pour ce retour très intéressant Smile

[Résolu] Comportement étrange avec @font-face - Meteora - 11/04/2012

J'ai fait le test, firefox 11 ne gère pas l'extension eot.
J'utilise le format .ttf et j'ai compressé la font avec fontsquirrel, la font fait 24ko au lieu des 51ko d'origine. Elle fait le même poids en eot.
J'ai testé sous firefox 11, IE9, Opera et Chrome et il n'y a pas de soucis d'affichage. Il peut y avoir quelques bugs de caractères sous Opera, j'ai eu le soucis avec l'apostrophe, un carré s'affichait à la place. D'après la communauté Opera c'est normal, car @font-face a été intégré récemment à Opera (depuis la version 10a).
Par contre pour IE 6 à 8, il n'y a que l'extension eot qui fonctionne. Perso j'ai abandonné ses navigateurs et en 2ème font il y a Arial.

Si tu veux utiliser aussi pour IE6 à 8 utilise ce code. IE n'est pas très intelligent et il va télécharger les 2 fichiers même si il ne peut utiliser que le fichier eot. Il faut donc rajouter la syntaxe "format('truetype')". Les autres navigateurs ne télécharge que le fichier TTF.

Code :
[== CSS ==]

@font-face {

font-family: font;

src: url('font.ttf') format('truetype'),

     url('font.eot');

}