Comportement étrange (instable ?) avec @font-face

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.10
#~ Url du site : plusieurs sites différents
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.10
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.4
#~ MenuManager: 1.8.6
#~ FormBuilder: 0.7.3
#~ ModuleManager: 1.5.5
#~ News: 2.14.2
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ TinyMCE: 2.9.12
#~ Gallery: 1.6.1
#~ GAMadeSimple: 1.2
#~ CGSimpleSmarty: 1.7.3
#~ CGJobMgr: 1.3.3
#~ CGExtensions: 1.38.10
#~ NMS: 2.9
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.4.29
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 2048
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (0700)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.1.73
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

PB également rencontre sur http://www.ateliers-etheria.com/, qui est en 1.11.4.


Bonjour,

Sur 2 sites différents, 2 versions différentes, j'ai rencontré le même souci (reproductible sur Firefox, IE MAIS PAS Chrome), et depuis différents ordis.

Ces sites utilisent plusieurs gabarits (qui sont la déclinaison d'un gabarit de base). Ces gabarits font appel à une même CSS, qui contient un @font-face.

Tout se passe bien un certain temps (la police "exotique" s'affiche bien), puis apparemment sans raison, ce style n'est plus géré sur certains gabarits des sites ; c'est la police de substitution qui s'affiche.

Plus étrange : si je duplique le gabarit qui pose problème, et que je rattache la copie à la place de l'original, le souci est résolu (pour combien de temps ?).


Est-ce que quelqu'un a déjà rencontré/résolu ce souci ?

D'avance merci.

Virginie
Je fais pousser votre site web, vous faites grandir votre activité !
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.10
#~ Url du site : plusieurs sites différents
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.10
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.4
#~ MenuManager: 1.8.6
#~ FormBuilder: 0.7.3
#~ ModuleManager: 1.5.5
#~ News: 2.14.2
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ TinyMCE: 2.9.12
#~ Gallery: 1.6.1
#~ GAMadeSimple: 1.2
#~ CGSimpleSmarty: 1.7.3
#~ CGJobMgr: 1.3.3
#~ CGExtensions: 1.38.10
#~ NMS: 2.9
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.4.29
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 2048
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (0700)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.1.73
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

PB également rencontre sur http://www.ateliers-etheria.com/, qui est en 1.11.4.


Bonjour,

Sur 2 sites différents, 2 versions différentes, j'ai rencontré le même souci (reproductible sur Firefox, IE MAIS PAS Chrome), et depuis différents ordis.

Ces sites utilisent plusieurs gabarits (qui sont la déclinaison d'un gabarit de base). Ces gabarits font appel à une même CSS, qui contient un @font-face.

Tout se passe bien un certain temps (la police "exotique" s'affiche bien), puis apparemment sans raison, ce style n'est plus géré sur certains gabarits des sites ; c'est la police de substitution qui s'affiche.

Plus étrange : si je duplique le gabarit qui pose problème, et que je rattache la copie à la place de l'original, le souci est résolu (pour combien de temps ?).


Est-ce que quelqu'un a déjà rencontré/résolu ce souci ?

D'avance merci.

Virginie
Je fais pousser votre site web, vous faites grandir votre activité !
#2
Salut,
Commence par corriger l'html : http://validator.w3.org/check?uri=http%3...es#line-46

Voici un article au sujet de ta syntaxe qui propose une ligne supplémentaire : http://www.fontspring.com/blog/further-h...oof-syntax
#2
Salut,
Commence par corriger l'html : http://validator.w3.org/check?uri=http%3...es#line-46

Voici un article au sujet de ta syntaxe qui propose une ligne supplémentaire : http://www.fontspring.com/blog/further-h...oof-syntax
#3
Bonsoir,

J'ai testé avec http://www.ateliers-etheria.com/index.ph...-creatrice

J'ai corrigé les erreurs de code.

J'ai vérifié la syntaxe de @font-face, qui était la même que celle proposée dans l'article (code généré par le webfont generator de fontsquirrel).

Aucun changement.

Ce qui est vraiment étrange dans ce "bug", c'est qu'il survient après que l'affichage ait fonctionné correctement un certain temps, et qu'il suffit d'utiliser un nouveau gabarit pour le résoudre...quand bien même le nouveau gabarit est une duplication de l'ancien, et que donc, rien n'a été changé au niveau du code.

Par contre, je viens d'essayer de remplacer le lien "src: url('[[root_url]]/uploads/..." par un lien absolu src: url('http://www.ateliers-etheria.com/uploads/...) et ça semble régler le pb...

Ca fait un peu bidouille, mais ça a l'air de "le faire" ;-s

Un rapport avec la difficulté de Firefox à aller chercher un @font-face dans un autre domaine ?
Qui serait capable de reconnaitre le domaine un certain temps, puis deviendrait un jour incapable de faire la liaison ? Seulement sur certains gabarits et pas d'autres ? (pour l'autre site où j'ai rencontré le souci, la différence entre les gabarits tient dans une variable sur une balise de news).

Et même souci chez IE ?
Je fais pousser votre site web, vous faites grandir votre activité !
#3
Bonsoir,

J'ai testé avec http://www.ateliers-etheria.com/index.ph...-creatrice

J'ai corrigé les erreurs de code.

J'ai vérifié la syntaxe de @font-face, qui était la même que celle proposée dans l'article (code généré par le webfont generator de fontsquirrel).

Aucun changement.

Ce qui est vraiment étrange dans ce "bug", c'est qu'il survient après que l'affichage ait fonctionné correctement un certain temps, et qu'il suffit d'utiliser un nouveau gabarit pour le résoudre...quand bien même le nouveau gabarit est une duplication de l'ancien, et que donc, rien n'a été changé au niveau du code.

Par contre, je viens d'essayer de remplacer le lien "src: url('[[root_url]]/uploads/..." par un lien absolu src: url('http://www.ateliers-etheria.com/uploads/...) et ça semble régler le pb...

Ca fait un peu bidouille, mais ça a l'air de "le faire" ;-s

Un rapport avec la difficulté de Firefox à aller chercher un @font-face dans un autre domaine ?
Qui serait capable de reconnaitre le domaine un certain temps, puis deviendrait un jour incapable de faire la liaison ? Seulement sur certains gabarits et pas d'autres ? (pour l'autre site où j'ai rencontré le souci, la différence entre les gabarits tient dans une variable sur une balise de news).

Et même souci chez IE ?
Je fais pousser votre site web, vous faites grandir votre activité !
#4
Bonsoir,
et tu es sûre que c'est lié à CMSMS?
{SEO}
Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)
#4
Bonsoir,
et tu es sûre que c'est lié à CMSMS?
{SEO}
Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)
#5
Virginie 12 a écrit :J'ai vérifié la syntaxe de @font-face, qui était la même que celle proposée dans l'article (code généré par le webfont generator de fontsquirrel).
Il manque toujours une ligne : src: url('webfont.eot'); /* IE9 Compat Modes */
Il serait bon de lire les commentaires de cette page.

C'est comme ta voiture qui a un bruit, une fois chez le garagiste on ne l'entend plus. Pour moi, la police est la bonne sous IE 7 8 9 10 11 et Edge (ce dernier est par défaut sur ton site) et FF 30.
A part ça, comme Jissey, je ne vois pas pourquoi le cms serait en faute.
#5
Virginie 12 a écrit :J'ai vérifié la syntaxe de @font-face, qui était la même que celle proposée dans l'article (code généré par le webfont generator de fontsquirrel).
Il manque toujours une ligne : src: url('webfont.eot'); /* IE9 Compat Modes */
Il serait bon de lire les commentaires de cette page.

C'est comme ta voiture qui a un bruit, une fois chez le garagiste on ne l'entend plus. Pour moi, la police est la bonne sous IE 7 8 9 10 11 et Edge (ce dernier est par défaut sur ton site) et FF 30.
A part ça, comme Jissey, je ne vois pas pourquoi le cms serait en faute.
#6
Bonjour,

Je ne parle pas anglais couramment et je suis peut-être passée à côté de quelque chose, mais j'ai bien une ligne

src: url('webfont.eot'); /* IE9 Compat Modes */ (sans le commentaire)

Voici mon code exact :

@font-face {
font-family: kawoszehmedium;
src: url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.eot');
src: url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.woff') format('woff'),
url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.ttf') format('truetype'),
url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.svg#kawoszehmedium') format('svg');
font-weight: normal;
}

NB : à l'origine, le code était src: url('[[root_url]]/uploads/sabine...


Je pense que c'est lié à CMSMS parce que :
- je n'ai ce souci qu'avec des sites CMSMS
- uniquement sur certains gabarits (qui, pourtant, utilisent la même CSS que ceux qui fonctionnent et ont, eux-même fonctionné quelque temps)
- le pb semble résolu depuis que j'ai remplacé le lien src: url('[[root_url]]/uploads/sabine... par le lien absolu src: url('http://www.ateliers-etheria.com/uploads/sabine... donc Jean, c'est normal que tu ne reproduise pas ; j'ai aussi un affichage correct (cf mon post d'hier soir).


Je pense donc que l'utilisation de [[root_url]] est (peut-être) la cause... donc pas CMSMS à proprement parler, mais un souci lié à son utilisation... à moins que le pb ne se reproduise comme les fois précédentes, cad après avoir fonctionné un moment.

Peut-être la conjonction :
- des difficultés de FF à gérer les @font-face avec une URL sur un autre domaine,
- d'une mise en cache du gabarit par le serveur (là je n'y connais rien, mais ça expliquerait que le pb se résolve quand on change de gabarit ou si on met à jour la CSS)
- de l'utilisation de [[root_url]]

NB : je viens de remettre [[root_url]] à la place de http://www.ateliers-etheria.com dans les url @font-face, et, pour l'instant, ça fonctionne.

Je voulais tester si le fait de détacher la css des gabarits qui ont des pb, puis de la rattacher (sans rien changer ni au gabarit, ni à la CSS) pouvait résoudre le pb, mais je n'ai plus de matière... jusqu'au prochain dysfonctionnement.

Ou détacher/rattacher le gabarit à la page (pareil, sans autre modification).




Est-ce qu'il y a une manière propre d'écrire des URL relatives dans les CSS sans utiliser [[root_url]] ?


Qui utilise @font-face dans ces CSS CMSMS ?

Et en le codant comment ?


Virginie
Je fais pousser votre site web, vous faites grandir votre activité !
#6
Bonjour,

Je ne parle pas anglais couramment et je suis peut-être passée à côté de quelque chose, mais j'ai bien une ligne

src: url('webfont.eot'); /* IE9 Compat Modes */ (sans le commentaire)

Voici mon code exact :

@font-face {
font-family: kawoszehmedium;
src: url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.eot');
src: url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.woff') format('woff'),
url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.ttf') format('truetype'),
url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.svg#kawoszehmedium') format('svg');
font-weight: normal;
}

NB : à l'origine, le code était src: url('[[root_url]]/uploads/sabine...


Je pense que c'est lié à CMSMS parce que :
- je n'ai ce souci qu'avec des sites CMSMS
- uniquement sur certains gabarits (qui, pourtant, utilisent la même CSS que ceux qui fonctionnent et ont, eux-même fonctionné quelque temps)
- le pb semble résolu depuis que j'ai remplacé le lien src: url('[[root_url]]/uploads/sabine... par le lien absolu src: url('http://www.ateliers-etheria.com/uploads/sabine... donc Jean, c'est normal que tu ne reproduise pas ; j'ai aussi un affichage correct (cf mon post d'hier soir).


Je pense donc que l'utilisation de [[root_url]] est (peut-être) la cause... donc pas CMSMS à proprement parler, mais un souci lié à son utilisation... à moins que le pb ne se reproduise comme les fois précédentes, cad après avoir fonctionné un moment.

Peut-être la conjonction :
- des difficultés de FF à gérer les @font-face avec une URL sur un autre domaine,
- d'une mise en cache du gabarit par le serveur (là je n'y connais rien, mais ça expliquerait que le pb se résolve quand on change de gabarit ou si on met à jour la CSS)
- de l'utilisation de [[root_url]]

NB : je viens de remettre [[root_url]] à la place de http://www.ateliers-etheria.com dans les url @font-face, et, pour l'instant, ça fonctionne.

Je voulais tester si le fait de détacher la css des gabarits qui ont des pb, puis de la rattacher (sans rien changer ni au gabarit, ni à la CSS) pouvait résoudre le pb, mais je n'ai plus de matière... jusqu'au prochain dysfonctionnement.

Ou détacher/rattacher le gabarit à la page (pareil, sans autre modification).




Est-ce qu'il y a une manière propre d'écrire des URL relatives dans les CSS sans utiliser [[root_url]] ?


Qui utilise @font-face dans ces CSS CMSMS ?

Et en le codant comment ?


Virginie
Je fais pousser votre site web, vous faites grandir votre activité !
#7
Citation :Qui utilise @font-face dans ces CSS CMSMS ?

moi de temps à autre avec zero problème : lien
#7
Citation :Qui utilise @font-face dans ces CSS CMSMS ?

moi de temps à autre avec zero problème : lien
#8
Bonjoue et merci,



Avec toujours des url absolues pour appeler les fichiers eot, woff... ?

Comme ici : http://www.themaphoto.com/uploads/media/fonts... ou aussi avec des url relatives ? si oui, codées comment ?
Je fais pousser votre site web, vous faites grandir votre activité !
#8
Bonjoue et merci,



Avec toujours des url absolues pour appeler les fichiers eot, woff... ?

Comme ici : http://www.themaphoto.com/uploads/media/fonts... ou aussi avec des url relatives ? si oui, codées comment ?
Je fais pousser votre site web, vous faites grandir votre activité !
#9
utilisation de [[root_url]]/....

donc compilé monsite.com/...
#9
utilisation de [[root_url]]/....

donc compilé monsite.com/...
#10
Bon, c'est aussi comme ça que je les code...


Le mystère reste entier...


Sur themaphoto, la police caslon540roman est utilisée où ? Je n'en ai pas trouvé d'affichage.
Je fais pousser votre site web, vous faites grandir votre activité !
#10
Bon, c'est aussi comme ça que je les code...


Le mystère reste entier...


Sur themaphoto, la police caslon540roman est utilisée où ? Je n'en ai pas trouvé d'affichage.
Je fais pousser votre site web, vous faites grandir votre activité !
#11
Virginie 12 a écrit :Qui utilise @font-face dans ces CSS CMSMS ?

Et en le codant comment ?

Virginie
Moi, sur chaque projet, avec [[root_url]]. J'ai parfois des moments où les polices ne se chargent pas, ça arrive, je ne me souviens plus s'il y a des différences selon les navigateurs... Je pense plutôt à un souci réseau plutôt qu'autre chose.
Ouik - communication . outils numériques . design graphique
#11
Virginie 12 a écrit :Qui utilise @font-face dans ces CSS CMSMS ?

Et en le codant comment ?

Virginie
Moi, sur chaque projet, avec [[root_url]]. J'ai parfois des moments où les polices ne se chargent pas, ça arrive, je ne me souviens plus s'il y a des différences selon les navigateurs... Je pense plutôt à un souci réseau plutôt qu'autre chose.
Ouik - communication . outils numériques . design graphique
#12
Merci ouik, en effet, ç_a fait plutôt pb de réseau.

Dans mon cas, ce sont toutes les pages utilisant certains gabarits qui n'affichent pas, alors que toutes les pages utilisant les autres gabarits affichent correctement la police à charger.
Je fais pousser votre site web, vous faites grandir votre activité !
#12
Merci ouik, en effet, ç_a fait plutôt pb de réseau.

Dans mon cas, ce sont toutes les pages utilisant certains gabarits qui n'affichent pas, alors que toutes les pages utilisant les autres gabarits affichent correctement la police à charger.
Je fais pousser votre site web, vous faites grandir votre activité !
#13
Sur la page que tu as donnée (http://www.ateliers-etheria.com/index.ph...-creatrice), tu n'as pas la ligne manquante : src: url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.eot');
Voici ce que je vois :
Code :
[== CSS ==]
src: url("http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.eot?#iefix") format("embedded-opentype"),
url("http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.woff") format("woff"),
url("http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.ttf") format("truetype"),
url("http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.svg#kawoszehmedium") format("svg");
Si tu l'as effectivement mise, c'est que tu n'as pas vidé le cache du cms.

Je te signale que le background opacity de #page ne fonctionne pas sous IE8, ton corps de page est tout blanc.
Voici un lien avec différentes solutions pour corriger ce problème : http://stackoverflow.com/questions/39756...ng-in-ie-8
Tu peux tester ceci :
Code :
background: rgba(247, 234, 210, 0.4); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F7EAD2', endColorstr='#F7EAD2'); /* IE */
#13
Sur la page que tu as donnée (http://www.ateliers-etheria.com/index.ph...-creatrice), tu n'as pas la ligne manquante : src: url('http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.eot');
Voici ce que je vois :
Code :
[== CSS ==]
src: url("http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.eot?#iefix") format("embedded-opentype"),
url("http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.woff") format("woff"),
url("http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.ttf") format("truetype"),
url("http://www.ateliers-etheria.com/uploads/sabine/font/kawoszeh-webfont.svg#kawoszehmedium") format("svg");
Si tu l'as effectivement mise, c'est que tu n'as pas vidé le cache du cms.

Je te signale que le background opacity de #page ne fonctionne pas sous IE8, ton corps de page est tout blanc.
Voici un lien avec différentes solutions pour corriger ce problème : http://stackoverflow.com/questions/39756...ng-in-ie-8
Tu peux tester ceci :
Code :
background: rgba(247, 234, 210, 0.4); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F7EAD2', endColorstr='#F7EAD2'); /* IE */


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)