28172 sujets

CSS et mise en forme, CSS3

Pb @font-face ne marche pas sous IE (site Joomla 2.5.4)

Bonjour,
Je suis nouveau sur le forum et je souhaite vous soumettre mon problème:
Je développe un site Joomla 2.5.4 et ai utilisé @font-face dans personal.css pour la plusieurs polices non standard. Ca marche parfaitement sous Mozilla, Safari et Chrome mais pas sous IE (que je n'ai pu tester sous Mac que via WineBottler, je ne sais pas si cela peut poser problème..?). IE m'affiche une police par défaut et non la EdwardianScript et la CaviarDreams souhaitées. J'ai cherché sur le forum mais je ne comprends pas toujours les réponses ... je débute.. Donc si quelqu'un peut m'aider j'en serais ravi.
Voici les portions de personal.css que j'ai:


/* ##########################  general  ########################### */


@font-face {
  font-family: 'Titillium Maps';
  src: url("../fonts/TitilliumMaps29L002.eot");
  src: local('Titillium Maps'), local('TitilliumMaps'),
    url("../fonts/TitilliumMaps29L002.otf") format("opentype"),
    url("../fonts/TitilliumMaps29L002.woff") format("woff");
}
/* CS Ajout de la police pour les grands titres */
/* CS @font-face {
  font-family: 'ChopinScript';
/*CS  src: url("../fonts/ChopinScript.eot"); 
  src: local('ChopinScript'), local('ChopinScript'),
    url("../fonts/ChopinScript.otf") format("opentype");
   CS url("../fonts/TitilliumMaps29L002.woff") format("woff"); }*/

/*CS Nouvelle police Edwardian Script definitive pour les grands titres */ 
/*CS @font-face {
  font-family: 'Edwardian_Scr_Alt_ITC_TT';
  src: url("../fonts/Edwardian_Scr/Edwardian_Scr_Alt_ITC_TT.ttf");
}
*/
@font-face{  
	font-family: 'Edwardian_Scr_Alt_ITC_TT'; 
	src: 	url("../fonts/Edwardian_Scr/Edwardian_Scr_Alt_ITC_TT.ttf")  format("truetype"),
        	url("../fonts/TitilliumMaps29L002.eot")  format("opentype") ;
}


/* CS Ajout de nouvelles polices pour le corps de texte */
/*@font-face {
  font-family: 'RobotoThin';
  src: url("../fonts/Roboto/Roboto-Thin.ttf");
   /*CS src: local('Roboto'), local('Roboto'),
    url("../fonts/Roboto/Roboto.ttf") format("opentype");
  url("../fonts/TitilliumMaps29L002.woff") format("woff");
}*/
@font-face {
  font-family: 'Caviar_dreams';
  src: url("../fonts/Caviar_dreams/CaviarDreams.ttf");
   /*CS src: local('Roboto'), local('Roboto'),
    url("../fonts/Roboto/Roboto.ttf") format("opentype");
  url("../fonts/TitilliumMaps29L002.woff") format("woff"); */
}


Voici un extrait de ieonly.css (j'ai mis exactement la même chose dans ie7only.css) 
@font-face {
  font-family: 'Edwardian_Scr_Alt_ITC_TT';
  src: url("../fonts/Edwardian_Scr/Edwardian_Scr_Alt_ITC_TT.eot");
}
/* @font-face {
  font-family: 'RobotoThin';
  src: url("../fonts/Roboto/Roboto-Thin.eot");
} */
@font-face {
  font-family: 'Caviar_dreams';
  src: url("../fonts/Caviar_dreams/CaviarDreams.eot");
}


Par ailleurs les modules Flash du site ne marchent pas non plus sous IE: Photopro Portfolio flash module et Content - Image gallery - sigplus....
Bref avec IE il n'y a pas grand chose qui marche...
Merci de votre aide
Salut,

D'abord, est-ce normal que certaines règles @font-face soient commentées ?

Ensuite, les règles @font-face, telles qu'elles sont déclarées, sont incomplètes (il manque les déclarations CSS permettant de savoir si la graisse doit être normale ou pas et si la police doit s'afficher en italique ou pas) et ne correspondent pas aux déclarations actuellement préconisées. Jette un œil au code CSS généré par Fontsquirrel pour chaque police proposée. Tu peux également parcourir cette discussion, qui évoque le même problème.
Modifié par Victor BRITO (02 Jun 2012 - 21:05)
Bonjour et merci de ta réponse.
J'ai fait la modif suivante dans le personal.css. J'ai remplacé ceci:
@font-face {
  font-family: 'Caviar_dreams';
  src: url("../fonts/Caviar_dreams/CaviarDreams.ttf");
   /*CS src: local('Roboto'), local('Roboto'),
    url("../fonts/Roboto/Roboto.ttf") format("opentype");
  url("../fonts/TitilliumMaps29L002.woff") format("woff"); */
}


Par cela:
@font-face {
    font-family: 'CaviarDreamsRegular';
    src: url('../fonts/Caviar_dreams/webfontkit/caviardreams-webfont.eot');
    src: url('../fonts/Caviar_dreams/webfontkit/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Caviar_dreams/webfontkit/caviardreams-webfont.woff') format('woff'),
         url('../fonts/Caviar_dreams/webfontkit/caviardreams-webfont.ttf') format('truetype'),
         url('../fonts/Caviar_dreams/webfontkit/caviardreams-webfont.svg#CaviarDreamsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

et j'ai modifié la seule partie du personal.css qui utilise cette police:
#all
{
  /* CS color:#333 - Change la couleur du texte des articles */
  /*CS font-family: 'Caviar_dreams'; */
  font-family: 'CaviarDreamsRegular';
  font-size: 0.8em;
  color: #fff;
  border:solid 0px ;
  padding-top:0px;
  background:#fff;

}

Mais ça ne marche pas désormais plus sur aucun des navigateurs: ni IE7, ni Mozilla...?
As-tu une idée?
J'ai "remonté" toutes les polices générées par FONTSQUIRREL d'un niveau dans Fonts/Caviar_Dreams et ça remarche sous Mozilla et autres mais toujours pas sous IE7:
@font-face {
    font-family: 'CaviarDreamsRegular';
    src: url('../fonts/Caviar_dreams/caviardreams-webfont.eot');
    src: url('../fonts/Caviar_dreams/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Caviar_dreams/caviardreams-webfont.woff') format('woff'),
         url('../fonts/Caviar_dreams/caviardreams-webfont.ttf') format('truetype'),
         url('../fonts/Caviar_dreams/caviardreams-webfont.svg#CaviarDreamsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Visiblement deux niveaux de dossiers ne sont pas acceptés...
J'ai recopié cette partie de css telle qu'elle dans ieonly.css et ie7only.css mais toujours sans succès
Il semblerait que ça marche. Le site que je développe actuellement n'est pas en ligne et je voulais tester le fonctionnement des @font-face sous IE6, 7, etc. Mes problèmes venaient de la version "préinstallée" de IE7 proposée pas WineBottler. J'ai en effet modifié mes CSS exactement de la même manière et avec les même polices et codes FontSquirrel sur un autre site en ligne lui et ça marche.
Donc attention à WineBottler pour tester des sites sous IE quand on travaille avec un mac.
Merci de votre aide.
Salut,

j'ai le même problème, IE ne veut pas lire la typo ici c'est lobster générer par fontsquirrel, ça marche en local mais pas sur mon espace d'hébergement.

je comprend pas, d'autre typo générer par fontsquirrel marchait pourtant.


whoosh Smiley murf
Modifié par tonyvincennes (30 Oct 2012 - 09:49)
une autre typo généré par fontsquirrel marche bien:

font-family: 'WrexhamScriptRegular';

mais celle-ci, et bien non:
font-family:'Lobster1.3Regular';

mes chemins semble bon, je comprend pas, IE reconnait la typo en local, mais pas sur mon espace d'hébergement....
Modifié par tonyvincennes (30 Oct 2012 - 09:50)
Bonjour,
j'ai le même problème que vous: le code @font-face et les polices générées par fontsquirrel ne fonctionnent pas toujours. C'est ok avec CaviarDreams par exemple mais pas pour eurofurence.
Je ne sais malheureusement pas pourquoi...
Bonjour
Ma petite solution ne permettra sans doute pas de comprendre la règle @font-face, mais elle a l'avantage de fonctionner à coup sur puisque les polices ont été testée par des milliers d'utilisateurs - J'utilise http://www.google.com/webfonts qui propose environ 500 polices. Elles seront visibles avec le même aspect sur de nombreux systèmes et appareils (j'ai testé moi même)

On récupère un lien à ajouter dans le head : 
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic" />

Quand on regarde ce lien de plus près ; on s'apperçoit qu'il s'agit bien d'une feuille CSS incluant les polices avec la règle @font-face :
http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic
Modifié par Aureance (12 Jun 2012 - 14:37)
Il me semble avoir trouvé: les fichiers de fonts générés par fontsquirrel sont par défaut en accès interdit à "everyone" donc ne s'ouvrent pas à l'appel dans la .css
Il suffit de passer les droits en 755 pour que ça marche.
Sous mac, tu fais pomme+I sur les fonts générées par FontSquirrel puis tout en bas de la fenêtre tu mets "everyone" en lecture+écriture
Ou bien dans le terminal: sudo chmod -R 755 webfontkit-123154878 par exemple
Sous PC je ne suis pas très sûr mais en cliquant droit/Propriétés tu dois pouvoir faire la même chose dans l'onglet Security (tu mets tous les droits en lecture à tout le monde )
Sujet clos
Aller à