[resolu]Combinaison font-face, jquery et cufon

Bonjour tout le monde,

J'ai pour objectif d'utiliser une typographie spéciale pour certains titres d'un site internet. C'est pour moi l'occasion de découvrir les possibilités offertes par font-face de css3 et le système cufon.

J'ai découvert un tutorial à ce sujet qui pourrait intéresser plus d'un.
Le but de ce tuto est de d'abord contrôler si une typo est disponible sur l'ordi de l'utilisateur, sinon, il l'utilise la font-face css3 et si le navigateur ne supporte pas font-face, alors le site utilisera le système cufon.

Mon problème est que mon site ne génère pas du tout la typo avec cufon. Je sais que le nom de la typo doit exactement être le même dans font-name. J'ai essayé plusieurs solutions, mais rien à faire . Peut-être pourriez-vous m'aiguiller!!!

voici la source css :

@font-face {
	font-family: 'QuicksandLight';
	src: url('Quicksand_Light.eot');
	src: local('Quicksand Light'), local('QuicksandLight-Regular'), url('Quicksand_Light.ttf') format('truetype');
}
h2{
  font-size: 4.06em; 
  font-family: "QuicksandLight", "Lucida Sans", "Lucida Grande", Arial, Verdana, sans-serif;
  color: #AEAEA0; /*sand*/
  font-weight: lighter;
  line-height: 0.8em;
  height:25px;
  padding:0;
}

Et voici la 2ème partie. Après avoir placé le fichier YUI de cufon et le fichier de police en javascript, voici le script jquery :

     <script type="text/javascript">
			$(document).ready(function() {
	      if(!$.fontAvailable('QuicksandLight')) {
	        Cufon.replace('h1', {hover: true});
	      }
      });
    </script>

J'ai conserver le mot "QuicksandLight" sans espace, mais malheureusement, le script cufon ne génère pas la font. J'ai fait des tests avec "Quicksand Light", mais rien à faire. Si qqn peux m'aider!!!!

Merci
Modifié par nforum (14 Jan 2010 - 16:15)

Hello,

T'as pas oublié de mettre le type de typo qu'est ta police ?:

src: url('font/mapoliceexotique.ttf') format('truetype'); }

??

@font-face {

	font-family: 'QuicksandLight';

	src: url('Quicksand_Light.eot');

	src: local('Quicksand Light'), local('QuicksandLight-Regular'), url('Quicksand_Light.ttf') format('truetype');

}

C'est ce que ton tutorial disait au tout début.
(je connais pas cette méthode... peut être c'est une erreur...)

A essayer !

Charly

J'ai pourtant bien indiqué le "truetype"! Je pense pas que ce soit ça le problème... Mais merci

Hello,

Déjà ta police est une EOT (Embedded OpenType) et non True Type !
Je sais pas si c'est important mais essaie de mettre opentype.

Charly

la première typo est en eot pour IE. et la 2eme est en ttf pour les autres navigateurs avec la spécification du format "truetype". Le format otf, ainsi que la spécification du format eot, ne sont dans ce cas pas nécessaires.

bonsoir,

Cette police est-elle invisible sous tous les navigateurs ?
Si tu charge une autre police , le defaut existe t-il toujours ? (par exemple avec l'une de celle proposé en libre de droit sur fontsquirrel)

Si oui (pas visible) ta police (en version eot et ttf ) ne se trouve probablement pas dans le même répertoire que ta feuille de style (comme l'indique ton code src : url(police.xxx); ) et si elle n'est pas sur le pc du visiteur il ne risque pas de l'afficher .

Sinon
Peut tu mettre en ligne une page avec un peu de texte qui reproduit ton bug ,avec le css dedié a ta police , la police et le script js que l'on perçoivent le defaut ?

Ta police EOT a t-elle etait genéré via un convertisseur a partir de la police TTF ? Il est possible que la font est des droits restreint , limité a un domaine par exemple si elle a etait generé avec WEFT par exemple .

Ok. le problème est résolu. ce n'était ni un problème d'accès aux fichiers ttf ou eot, mais uniquement un problème de jquery. la version jquery n'était pas la bonne.

merci pour les conseils.