28172 sujets

CSS et mise en forme, CSS3

[résolu] @font-face internet explorer marche pas

Pages :
Bonjour à la communauté,

Voilà le sujet semble standart.
J'ai déjà eu recours à font-squirell pour implémenter des polices non-standart sur d'autres sites avec la même méthode.

Seulement cette fois je n'arrive pas à comprendre pourquoi ça ne marche pas sur internet explorer.
voilà le site concerné :
http://www.francois-rosenbaum.com/kidsvisit/
la feuille de style avec les styles css et l'appel @font-face :
http://www.francois-rosenbaum.com/kidsvisit/templates/template_kidsvisit/css/kidsvisit.css

En gros j'ai fait ça :

@font-face {
  font-family: 'VijayaRegular';
  src: url('http://www.francois-rosenbaum.com/kidsvisit/templates/template_kidsvisit/fonts/vijaya-webfont.eot?') format('eot'),
  	   url('http://www.francois-rosenbaum.com/kidsvisit/templates/template_kidsvisit/fonts/vijaya-webfont.woff') format('woff'), 
   	   url('http://www.francois-rosenbaum.com/kidsvisit/templates/template_kidsvisit/fonts/vijaya-webfont.ttf') format('truetype');
}

@font-face {
  font-family: 'VijayaBold';
  src: url('http://www.francois-rosenbaum.com/kidsvisit/templates/template_kidsvisit/fonts/vijayab-webfont.eot?') format('eot'),
  	   url('http://www.francois-rosenbaum.com/kidsvisit/templates/template_kidsvisit/fonts/vijayab-webfont.woff') format('woff'), 
   	   url('http://www.francois-rosenbaum.com/kidsvisit/templates/template_kidsvisit/fonts/vijayab-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'JosschriftBoldRegular';
    src: url('../fonts/josschrift_bold-webfont.eot');
    src: url('../fonts/josschrift_bold-webfont.eot?iefix') format('eot'),
         url('../fonts/josschrift_bold-webfont.woff') format('woff'),
         url('../fonts/josschrift_bold-webfont.ttf') format('truetype'),
         url('../fonts/josschrift_bold-webfont.svg#webfontzxsBvw2b') format('svg');
    font-weight: normal;
    font-style: normal;
}

div.mod_citations_accueil p{
	font-family: 'VijayaRegular';
	font-size:19px;
	line-height:20px;
	color:#0c5a76;
	text-align:justify;	
/*correspond aux textes dans le pavé gris en bas de page*/
	}

div.cadre_txt h1{
	font-family:"JosschriftBoldRegular";
	font-size:23px;
	padding-top:60px;
	padding-bottom:25px;
	text-align:center;
	color:#FFF;
/*correspond au titre dans le cadre orange "Kidsvisit c'est quoi"*/}


D'après tout ce que j'ai lu ça devrait pourtant marcher aussi sur internet explorer.

Peut être que certaine polices ne peuvent pas marcher avec @fontface ?
Quelqu'un voit où ça coince ?

Merci pour votre aide...
Modifié par boucdur00000 (25 Mar 2011 - 13:48)
bon ben on dirait que je vais devoir faire sans font-face.

Ce serait vraiment dommage vu toutes les autres méthodes présentent de gros inconvénients.

Vous êtes sûr de ne pas pouvoir m'aider messieurs/Dame de la communauté Alsacréations ?
On est des bénévoles, on répond quand on a du temps libre… Smiley cligne


Pour ton problème, essaye les chemins relatifs et enlève cufon qui ne sert à rien. Je ne vois pas non plus de version svg de vijaya (utile pour iOS<4.2 ou opera 9). Tu peux utiliser le generator de fontsquirrel pour avoir un code correct. Smiley cligne
Modifié par Patidou (25 Mar 2011 - 13:41)
Merci Patidou,

Je sais bien je suis peut être un peu impatient sur ce coup là. c'est mon client qui me transmet son stress forcemment.

J'ai justement utilisé font-squirell qui m'a généré ce beau code :
@font-face { 
    font-family: 'JosschriftBoldRegular'; 
    src: url('../fonts/josschrift_bold-webfont.eot'); 
    src: url('../fonts/josschrift_bold-webfont.eot?iefix') format('eot'), 
         url('../fonts/josschrift_bold-webfont.woff') format('woff'), 
         url('../fonts/josschrift_bold-webfont.ttf') format('truetype'), 
         url('../fonts/josschrift_bold-webfont.svg#webfontzxsBvw2b') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

div.cadre_txt h1{ 
    font-family:"JosschriftBoldRegular"; 
    font-size:23px; 
    padding-top:60px; 
    padding-bottom:25px; 
    text-align:center; 
    color:#FFF; 
/*correspond au titre dans le cadre orange "Kidsvisit c'est quoi"*/}


Pourtant internet explorer ne prend pas en compte la police non-standart en question.
Et les fichiers appellés sont bien place au bon endroit.
Modifié par boucdur00000 (25 Mar 2011 - 14:39)
Merci pour ta réponse sur mon topic, je te donne ici un retour d'expérience de mon coté.

J'ai eu un problème similaire avec une font, et j'ai conclu que c’est tout simplement la conversion en EOT de cette font qui déconne. Pour en avoir le cœur net, remplace ta font par une autre et laisse exactement le même code; si ça marche, tu as trouvé la source de ton problème. Smiley smile
Aie tu dis donc qu'il arrive que certaines fonts ne convertissent pas en eot.
Ce serait une tuile ça.

Je vais essayé ce que tu dis c'est une bonne idée.

Et si c'est le cas et que mes 2 fonts non-standart ne peuvent pas être converti en eot sur font squirell il y a quand même un solution.

Un autre generateur de eot pourrait marcher selon toi dans un cas comme ça ?
Je ne sais pas si c'est dû à ça mais tu n'as toujours pas enlevé cufon.
Modifié par Patidou (25 Mar 2011 - 14:03)
Il y a des quotes qui se baladent : 
url(../fonts/'josschrift_bold-webfont.woff') format('woff'),   
url(../fonts/'josschrift_bold-webfont.svg#webfontzxsBvw2b') format('svg');


Les quotes ouvrantes sont après ../font/ ça ressemble à un copier collé malheureux après changement de localisation des fichiers.
oups pardon.
C'est le copier coller dans ce post que j'ai mal fait.
Je le corrige.
En vrai je n'ai pas ce probleme. D'ailleurs le @font-face marche sur firefox
Ca y est je viens d'essayer avec une autre police (hermes thin) et ça me fait pareil.
C'est à dire que ça marche sur firefox mais pas sur internet explorer

très bizare car j'ai déjà utilisé exactament la même polices sur un autre site avec font-squirrel.
Et ça marchait.

Mon site est en joomla ça peut avoir un lien. Je vois pas le rapport mais bon...

@font-face {
    font-family: 'HermesRegular';
    src: url('../fonts/hermes-thin-webfont.eot');
    src: url('../fonts/hermes-thin-webfont.eot?iefix') format('eot'),
         url('../fonts/hermes-thin-webfont.woff') format('woff'),
         url('../fonts/hermes-thin-webfont.ttf') format('truetype'),
         url('../fonts/hermes-thin-webfont.svg#webfonteNXbTwkJ') format('svg');
    font-weight:normal;
    font-style: normal;

div.cadre_txt h1{
	font-family:"HermesRegular";
	font-size:23px;
	padding-top:60px;
	padding-bottom:25px;
	text-align:center;
	font-weight:normal;
	color:#FFF;}

}

Modifié par boucdur00000 (25 Mar 2011 - 15:12)
Reprends ta portion de code et isole la (dans un fichier CSS+HTML a part) et fait le test. Tant que ça ne marche pas isolé, ça ne marchera pas non plus dans Joomla...et vice-versa. Tu écartes ainsi d'autres problèmes. Smiley langue
Bon ben je comprend vraiment pas.
J'ai reduit ma feuille de style à seulement ça :


@font-face {
    font-family: 'HermesRegular';
    src: url('../fonts/hermes-thin-webfont.eot');
    src: url('../fonts/hermes-thin-webfont.eot?iefix') format('eot'),
         url('../fonts/hermes-thin-webfont.woff') format('woff'),
         url('../fonts/hermes-thin-webfont.ttf') format('truetype'),
         url('../fonts/hermes-thin-webfont.svg#webfonteNXbTwkJ') format('svg');
    font-weight:normal;
    font-style: normal;}

div.cadre_txt h1{
	font-family:"HermesRegular";
	font-size:23px;
	padding-top:60px;
	padding-bottom:25px;
	text-align:center;
	font-weight:normal;
	color:#000;}


J'ai donc effacé absolument tous les autres styles. Il n' y a vraiment plus que ce que j'ai mis au dessus.

Et pourtant toujours le même problème.

@font_face marche sur firefox/chrome etc... mis pas internet explorer
Astral God a écrit :
jJ'ai eu un problème similaire avec une font, et j'ai conclu que c’est tout simplement la conversion en EOT de cette font qui déconne. Pour en avoir le cœur net, remplace ta font par une autre et laisse exactement le même code; si ça marche, tu as trouvé la source de ton problème. Smiley smile

bonjour,

je confirme le même genre d'experience.

Pour mes test de conversion sous windows je m'etait bricolé un outil qui me permettait de tester rapidement la conversions des fonts. http://yidille.free.fr/plux/valign/?26-de-vos-visiteurs-meme-pas-peur#convertisseur

Pour windows uniquement,
un repertoire avec l'utilitaire ttf2eot http://code.google.com/p/ttf2eot/downloads/list
un fichier html de test ( regle @font-face + liste des caractéres que vous voulez tester a l'affichage : le "ç" par exemple)
un repertoire font avec les ttf a convertir en eot
le fichier batch qui va s'occuper de lancer le convertisseur et ouvrir la page html dans IE

Une fois ce repertoire preparé, il vous suffira de deposer dans le repertoire font les ttf a tester et convertir ... par defaut la police converti prend le nom de test , inutile donc de réecrire la regle css.



Cordialement.

<edit> ça ne solutione pas ton probleme mais permet de verifier la possibilité de l'usage d'une font (en dehors des problemes de licence) </>
Modifié par gc-nomade (26 Mar 2011 - 13:55)
Pages :
Sujet clos
Aller à