• juin 7

Gestion des polices exotiques avec CSS3, jQuery et Cufon

Cette semaine nous aborderons le problème de la gestion des polices exotiques (comprendre les polices non-standard) suivant les différents navigateurs. La solution proposée ci-dessous n’est pas forcément la meilleure sur la question du « poids de la page » mais c’est celle qui d’après mes essais couvre le plus de navigateurs et cause le moins de problèmes.

Qu’est-ce qu’une police exotique ?

Une police exotique est tout simplement une police non-standard. D’accord, vous n’êtes pas plus avancé alors qu’est-ce qu’une police standard ? C’est tout simplement une police présente sur tous les systèmes d’exploitation et prise en charge par tous les navigateurs. La police Arial est une police standard, à contrario la police Helvetica n’est pas une police standard quant à la police Helvetica Neue, ne cherchez pas à la trouver sur un système d’exploitation autre que Mac OS.

En partant de ce principe, le webdesigner et l’intégrateur doivent donc trouver comment faire avec les polices standards et les polices exotiques dans le but d’atteindre le Saint-Graal, un affichage identique sur tous les navigateurs.

Les différentes solutions

Les différentes solutions sont donc relativement simple. Tout d’abord du coté du webdesigner, il faudra faire au maximum avec les polices standards en ne gardant les polices exotiques que pour les éléments « statiques » de votre maquette : logo et navigation par exemple. Seulement cette limite peut être forte pour ceux qui souhaiteraient avoir le titre d’un article affiché avec une police exotique.

Du coté de l’intégrateur maintenant, il faudra faire avec la maquette du webdesigner. Tous les éléments statiques pourront être transformés en images et gérés via les sous propriétés de la balise a : a:link, a:visited, a:hover, a:active, – mémotechnique : LoVe HAte.

Seulement voila, que faire de nos titres utilisant une police exotique et pourtant dynamique ? La aussi plusieurs solutions existent, le remplacement du texte par une image générée via une libraire de type GD ou encore ImageMagick, l’utilisation de propriétés CSS ou encore le recours à Flash et/ou Javascript. Le tout étant de trouver le moyen convenant au maximum de monde.

Écartons directement l’utilisation de GD/ImageMagick, cela implique un peu de travail coté développement et l’intégrateur n’est pas forcément développeur. Au niveau de CSS, @font-face est une solution proposée du coté de CSS3. Enfin, du coté de flash et de JS, beaucoup d’entre-vous connaissent la solution sIFR mais beaucoup d’entre-vous savent aussi que sIFR à quelques problèmes relavant par moment du mysticisme.

Ma solution : CSS3, jQuery et Cufon

Passons maintenant à ma solution, elle utilise CSS3 via @font-face, jQuery pour la détection de la présence des polices et Cufon pour le remplacement. Le but, rendre la chose compatible avec le maximum de navigateurs. Pour les détracteurs, oui, si jamais une personne arrive avec Internet Explorer 6 et le javascript désactivé, cela ne fonctionnera pas.

Première étape : @font-face et CSS3

La première étape de la solution consiste en l’utilisation de @font-face. @font-face est une propriété CSS3, cette première étape ne s’appliquera donc qu’au navigateur supportant cette propriété CSS3.

Pour information @font-face est en fait une propriété CSS 2 complètement délaissé à l’époque de CSS 2.1 puis réintroduite via CSS3.

Nous allons donc prendre notre fichier de police, l’envoyer dans un dossier précis (soyons fou, il se nommera /font/) puis l’inclure dans notre feuille de style de la façon suivante.

@font-face { font-family : 'Ma police exotique';
src: url('font/mapoliceexotique.ttf') format('truetype'); }

Seconde étape, appeler notre police de la façon la plus basique qui soit via la propriété CSS font-family. Nous l’appellerons pour nos titres h3 dans le div avec l’identifiant article.

#article h3 { font-family: "Ma police exotique", arial, sans-serif; }

Seconde étape : cufon

Passons maintenant aux autres navigateurs, nous utiliserons cufon car après beaucoup d’essais en condition de production, cufon est la meilleure alternative à sIFR.

Le fonctionnement de cufon : cufon est composé de deux fichiers, le premier est un fichier yui (interface) chargé de traiter le fichier de police en javascript créé via une interface web. cufon s’implémente via VME sur les vieux navigateurs et via canvas sur les navigateurs plus récents.

Tout d’abord, télécharger le fichier YUI de cufon puis se rendre sur le site internet de cufon afin de générer un fichier javascript de police. Une fois cela fait, envoyer le tout sur votre serveur dans le repertoire de votre choix (disons /js/).

<script src="js/cufon-yui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mapoliceexotique.font.js" type="text/javascript" charset="utf-8"></script>

Troisième étape : jQuery

Une fois l’étape 3 terminée, nous pourrions très simplement nous arrêter la mais cela serait un peu bête car l’étape 1 n’aurait donc aucun sens. Nous allons donc très simplement utiliser notre ma librairie javascript favorite à savoir jQuery ainsi qu’un plugin pour tester la présence du fichier de police sur l’ordinateur du visiteur.

Pour cela télécharger jQuery (si vous ne l’utiliser pas déjà pour tous vos effets javascript) puis le plugin fontavailable. Enfin, envoyer le tout dans votre repertoire /js/ puis inclure le tout.

<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.fontavailable-1.1.min.js" type="text/javascript" charset="utf-8"></script>

Passons maintenant au bout de code javascript à intégrer pour utiliser le tout.

	<script type="text/javascript">
	$(document).ready(function() {
	    if(!$.fontAvailable('Ma police exotique')) {
	      Cufon.replace('#article h3');
	    }
	});
	</script>

Conclusion

Passons maintenant au cheminement complet de cette technique :

  1. Le visiteur arrive sur votre site, le dom se charge, la feuille de style css est appelé et essaie d’appliquer votre police exotique
  2. Votre visiteur n’a pas la police exotique
    1. Il est sur un navigateur supportant @font-face, la police se télécharge.
    2. Il n’est pas sur un navigateur supportant @font-face, le document se charge, fontavailable teste la présence de la police et l’intègre
  3. Votre visiteur a votre police exotique
    1. Rien ne se passe

Au final et pour revenir à mon introduction, certains d’entre-vous pourrons s’étonner de l’armada déployée pour l’occasion (qui n’est d’ailleurs pas plus importante que celle utilisée pour une intégration correcte de sIFR) mais le modèle peut être optimisé via fontavailable en ne limitant plus le test au changement de la police mais aussi au téléchargement de cufon-yui.js et votre fichier *.font.js.





Theme Forest

Comments

  1. Samy juin 7th

    Comment Arrow

    Cufon c’est pas un peu lourd pour juste afficher une police exotique ?


  2. Alexandre juin 7th

    Comment Arrow

    Si tu veux parler du poids au niveau ko, effectivement cufon est effectivement plus lourd que sIFR.

    Si tu veux parler du fait d’appeler une librairie xyz pour afficher des typo exotiques, c’est une des solutions et en tout cas, la solution qui pose le moins de problème sur le long terme.


  3. Neewok juin 22nd

    Comment Arrow

    C’est plutôt une bonne initiative de parler de @font-face et de rendre cette technique accessible en français mais ce serait bien plus cool de ta part de créditer l’auteur original : http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/


  4. Alexandre juin 22nd

    Comment Arrow

    A ma décharge le fait que je m’étais arrêté à la page google du projet et les trois lignes de l’exemple sans aller plus loin (le ! étant un test tout ce qu’il y a de plus banal).


  5. Neewok juin 23rd

    Comment Arrow

    Autant (d’aucuns disent « au temps », vaste débat) pour moi, je te crois. :) Excuse ma remarque.


  6. Laurent août 30th

    Comment Arrow

    Bonjour,

    merci pour votre article, je viens de l’intégrer dans un site, marche nickel

    je rencontre un problème lorsque j’ai des accents.

    auriez vous une solution ?

    Cordialement

    Laurent


  7. benoit octobre 28th

    Comment Arrow

    Si quelqu’un a une solution poru ces problèmes de caractères accentués, je suis également preneur.


  8. Alexandre octobre 28th

    Comment Arrow

    Hello benoit

    Pour corriger ce problème, il faut choisir une typo qui comporte les caractères accentués dans le fichier SWF.


  9. Samy Rabih octobre 28th

    Comment Arrow

    Une méthode qui marche même sous IE 6 :

    @font-face { font-family: NomdeLaPolice; src: url(../../../../fonts/police.eot); /* IE / src: local(« NomdeLaPolice »), url(../../../../fonts/police.ttf) format(« truetype »); / non-IE */ }

    A mettre dans vos CSS (le fichier .eot s’obtient très facilement depuis le .ttf via l’utilitaire ttf2eot)

    Ca évite le chargement d’une bibliothèque extérieure juste pour ça.


  10. severine novembre 13th

    Comment Arrow

    Bonjour au risque de passer pour une idiote… ca ne marche pas du tout sur firefox… ni IE chez moi : je crois avoir bien suivi les instructions, voici le code de ma page test :

    Polices

    $(document).ready(function() {
    if(!$.fontAvailable('Ma police exotique')) {
      Cufon.replace('#article h3');
    }
});

    test

    Qu’est-ce que je mets au mauvais endroit ?? a priori j’ai placé les fichiers correpondants là ou il fallait mais ca ne marche pas… ma police est dans img et voici le code de la page css :

    @font-face { font-family : ‘Ma police exotique’; src: url(‘img/littleD.ttf’) format(‘truetype’); }

    article h3 { font-family: « Ma police exotique », arial, sans-serif; }

    bonne journée et merci…


  11. Alexandre novembre 13th

    Comment Arrow

    Bonjour Séverine,

    Je ne sais pas si tu m’as copier/coller directement le code que tu as appliqué mais si c’est le cas, il faut remplacer les « Ma police exotique » par le nom de ta police (littleD) :)

    Après si ce n’est vraiment pas le cas, tu peux toujours regarder avec firebug (ou l’outil de dev de safari) si le fichier se charge correctement et plus largement ce qu’il se passe sur ta page


  12. severine novembre 14th

    Comment Arrow

    Bonjour Alexandre, merci pour ta réponse mais ca ne marche tjrs pas. je pense que je ne sais pas appeler le #article h3 dans le div…

    voici le code de la css : @font-face { font-family : ‘littleD’; src: url(‘img/littleD.ttf’) format(‘truetype’); }

    article h3 { font-family: « littleD », arial, sans-serif;

    Et le code de la page test.htm :

    Polices

    $(document).ready(function() {
    if(!$.fontAvailable('littleD')) {
      Cufon.replace('article');
    }
});

    test

    dois-je mettre un « style » à la place du « class » ? en tout cas RIEN ne se passe…

    merci


  13. severine novembre 14th

    Comment Arrow

    oups pardon pour cette partie.. j’avais fait des tests mais j’ai rectifié et ca ne change rien

    Cufon.replace('#article h3');

  14. Fili janvier 12th

    Comment Arrow

    @laurent et @benoit dans le générateur du site cufon, il suffit de cliquer la case « Latin-1 Supplement » pour obtenir les accents!!!


  15. Fili janvier 12th

    Comment Arrow

    Bonsoir Alexandre, Merci pour ton tuto. J’avais découvert la version anglaise d’un certain kilian, mais ta version propose qq petites différences.

    Néanmoins, en utilisant les 2 méthodes, j’ai tjs le même problème qui commence sérieusement à m’agacer. Peut-être pourra tu m’aiguiller.

    J’ai télécharger sur le site fontsquirrel.com la typo Quicksand. Le téléchargement compile automatiquement les fonts aux formats ttf et oet, ainsi qu’un fichier css avec les font-face. Le problème est le suivant : Le font-family est « QuicksandLight » et mon src local « Quicksand Light ». Dans le javascriptscript cufon, j’ai indiqué

     $(document).ready(function() {
      if(!$.fontAvailable('QuicksandLight')) {
        Cufon.replace('h1', { hover: true});
      }
  });

    J’ai essayé le même script avec « Quicksand Light » et « Quicksand », mais malheureusement, mon script cufon ne marche pas. FF 3.5 affiche bien la typo en css, mais d’autres navigateurs (chrome) n’affichent pas la typo cufon sous forme d’images :-(

    Est-ce que tu as une idée d’où provient le problème.

    Merci


  16. Fili janvier 14th

    Comment Arrow

    Mon problème est réglé. C’était ma version de jquery qui posait problème. dés pour mon post.


  17. aiphes février 24th

    Comment Arrow

    Très bonne solution avec toutefois des remarques et des questions : - comment faire pour appliquer la même police à des balises différentes ?(2 sortes de div par exemple) - il apparait que cufon remplace la police sur TOUS les navigateurs, mêmes ceux qui comprennent css3…du coup la css ne sert à rien…à moins que j’ai raté quelquechose…à noté que j’utilise cufon sur drupal via un module dédié…


  18. anna août 3rd

    Comment Arrow

    Bonjour ! Je vous remercie pour votre article, qui m’intéresse beaucoup. J’ai testé cufon, pour l’instant sans mettre en place @font-face ni font available. En effet, j’ai suivi plusieurs tutos avant de tomber sur votre article (comme celui-ci http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/ ), et j’ai vu sur de nombreux articles que cette technique ne permet pas à l’utilisateur de sélectionner le texte transformé par cufon. Pourtant j’ai vu que sur d’autres sites l’on pouvait sélectionner le texte (exemple : http://www.monblogdefille.com/blog/ ), mais comment cela se fait, je n’arrive pas à le déterminer. Sauriez-vous m’aiguiller à ce sujet ?


  19. Samy août 6th

    Comment Arrow

    Anna : tu parles de la police utilisée à droite sur Monblogdefille pour écrire l’adresse email? Il s’agit de la technique font-face, même si la personne a utilisé une classe CSS nommée « cufon » :)


  20. Jérémy décembre 22nd

    Comment Arrow

    Bonjour,

    comment se fait-il que malgré que Firefox 3.x supporte @font-face (j’ai testé en désactivant le chargement de Cufon), Cufon s’applique tout de même malgré la vérification via jQuery et AvailableFont :

    jQuery(document).ready(function() { if(!jQuery.fontAvailable(‘visitor1′)) { Cufon.replace(‘#rt-menu ul.menu li a span’); } });

    Pourriez-vous m’éclairer ? J’aimerai (et en thorie c’est ce qui est censé se passer je suppose) que si @font-face est supporté par le navigateur, cufon ne soit pas utilisé. Or là, @font-face supporte ou non, il applique Cufon. Si je désactive le code jQuery, je vois bien que sur mon firefox 3, @font-face est supporté alors que sur IE8 non… donc c’est vraiment au niveau du code ci-dessus que ça bloque !

    Merci, Jérémy


  21. Samy décembre 22nd

    Comment Arrow

    Jérémy : vu que @font-face est supporté par la quasi totalité des navigateurs, pourquoi le tester ?

    IE (depuis la version 6) gère @font-face, mais il faut convertir les polices au format .eot (il existe un outil ttf2eot qui le fait très bien)


  22. fmx janvier 5th

    Comment Arrow

    il est cuit au patate ton tuto, de la merde en barre. Impossible a mettre en place tu est très médiocre. Voila un bon tuto http://www.alsacreations.com/actu/lire/636-cufon-nouvelle-alternative-pour-intgrer-des-polices-truetype-et-opentype-au-web.html


  23. studio lambda mars 26th

    Comment Arrow

    Salut,

    Il est bien ce tuto malgré qu’il n’explique pas ce que fait cufon. Pour le coup, le dernier post renvoie vers un site qui le fait très bien. Ceci dit, il est quand même violent ce dernier post ou peut-être ironique va savoir!

    De mon côté, j’ai appliqué les consignes et tout fonctionne bien lorsque je travail en local. Par contre dès que je suis en prod (sur un serveur distant) et bien ça ne va plus trop si mon cache est vide. Oui si mon cache est vide!

    Donc pour ceux qui se plaignent que cufon fasse son taf même si font-face est supporté et bien la raison est simple, enfin je pense!

    Théorie :

    Lorsque font-face est supporté, les polices sont chargées depuis le serveur jusque chez le client et cela prend un certain temps. Et c’est justement ce temps qui fou le merdier car cufon lui ne se pose pas la question de savoir si les polices sont en train de se charger ou pas, il ne les trouve pas au moment ou le fontavailable répond! Donc il fait son petit micmac alors que le navigateur peut s’en passer, il faut juste attendre un peu. L’histoire du cache vide s’explique donc… car si je rafraichis ma page, les polices sont maintenant chargées (si j’ai attendu assez) et donc fontavailable répond ‘non’ à cufon car ce coup-ci, il les trouve!

    Pourtant le $(document).ready qui appel la fonction fontavailable ne devrait-elle pas s’exécuter une fois la page et ses ressources chargées?

    Voici donc une alternative :

    window.onload = function(){ if(!$.fontAvailable(‘my-police’)) { Cufon.replace(‘body’); } };


  24. pocky mars 27th

    Comment Arrow

    C’est dingue le référencement de google :)

    Histoire de mettre le truc à jour (et pour ceux qui savent lire correctement -_-v), la vraie bonne solution à utiliser devrait être celle citée par @fetard mais en un peu plus complète.

    Ne pas hésiter à aller voir par la : http://www.fontsquirrel.com/fontface/generator

    Et si vous cherchez comment générer vos propres typos, allez voir du coté de http://fontforge.sourceforge.net/


  25. khaled juillet 9th

    Comment Arrow

    merci beaucoup pour ces informations mais le problème qui je rencontre c’est que les polices que j’ai utilisé e fonctionne pas sur platform windows mais le SE MacOs fonctionne.


  26. Djo décembre 1st

    Comment Arrow

    Bonjour,

    J’essaie egalement de mettre sur mon theme wordpress la police ‘jokerman’ mais j’utilise un attribut dans les balises span (pas dans les titre type h1/h2/h3..) par exemple le texte ! Je voulais savoir si c’était possible avec cette technique et si oui si il y a des bout de code a modifier. Je remercie d’avance toutes les ames charitables qui auront la bonté de m’aiguiller :)


  27. Djo décembre 1st

    Comment Arrow

    il manque un bout dans mon message (merci l’éditeur qui ne reconnais pas le code html ou je ne sais quoi..) donc je réécris : blablabla par exemple < span-style= »font-family : jokerman »> le texte


  28. Samy décembre 2nd

    Comment Arrow

    Djo, au lieu d’utiliser « #article h3″, tu peux utiliser « span[attribut='tavaleur']« 


  29. Djo décembre 4th

    Comment Arrow

    ma valeur c a dire?


  30. Djo décembre 4th

    Comment Arrow

    j’ai essayer ta technique avec un h3 pour voir deja et je n’obtient rien :s je t’explique comment j’ai procéder, j’ai suivis toutes les etapes (j’ai bien copier les 4 fichiers.js dans un repertoire « js » dans la racine de mon site par mon client ftp(filezilla) et aussi mes 2 fichiers jokerman.eot et jokerman.ttf dans un repertoire « font » donc mon chemin est (wp-content/js ou font …). Aussi je ne comprends pas ou tu colles le code ?! moi jai tout mis a la suite dans le fichier .css (je rapel que je suis sous wordpress)


  31. Djo décembre 4th

    Comment Arrow

    je te copie donc mon code :

    @font-face { font-family : ‘jokerman’; src: url(‘wp-content/font/jokerman.eot’) format(‘truetype’); }

    article h3 { font-family: jokerman, arial, sans-serif; }

    $(document).ready(function() {
    if(!$.fontAvailable('Jokerman')) {
      Cufon.replace('#article h3');

    } });


  32. Djo décembre 4th

    Comment Arrow

    @font-face { font-family : ‘jokerman’; src: url(‘wp-content/font/jokerman.eot’) format(‘truetype’); }

    article h3 { font-family: jokerman, arial, sans-serif; }

    < script src= »js/cufon-yui.js » type= »text/javascript » charset= »utf-8″> < script src= »js/jokerman_400.font.js » type= »text/javascript » charset= »utf-8″>

    < script src= »js/jquery-1.3.2.min.js » type= »text/javascript » charset= »utf-8″> < script src= »js/jquery.fontavailable-1.1.min.js » type= »text/javascript » charset= »utf-8″>

    < script type= »text/javascript »> $(document).ready(function() { if(!$.fontAvailable(‘Jokerman’)) { Cufon.replace(‘#article h3′); } });


  33. Djo décembre 4th

    Comment Arrow

    voila en entier ^^ obligé de mettre des espaces dans les balises script pour que le site me l’affiche dans mon message.. Donc peut etre un probleme d’accent ou je ne sais quoi


  34. Samy décembre 4th

    Comment Arrow

    Tu as un exemple en ligne?

    Et tu sais, on a inventé pastie.org et pastebin.com, pour montrer du code aux autres :)


  35. Djo décembre 4th

    Comment Arrow

    non je ne connaissais pas pastie.org tres pratique ma foi ! l’exmple est mon propre site


  36. Djo décembre 4th

    Comment Arrow

  37. Djo décembre 4th

    Comment Arrow

    bon vu que le site ne veux pas non plus afficher les liens, et que cela ne marche pas avec pastie.org non plus! le lien de mon site est sur mon profil


  38. Samy décembre 5th

    Comment Arrow

    Et donc c’est sur http://www.pena-latina.fr/ que tu veux afficher des titres via Cufon? lesquels ?


  39. Djo décembre 6th

    Comment Arrow

    jokerman c’est marqué dans le code ^^


  40. Djo décembre 6th

    Comment Arrow

    ah! les titres pardon :p Il y a le BIENVENUE ecrit en caps et en noir sur la page d’acceuil en dessous des gros titres qui est mon teste article h3 (le mal placé en petit a gauche ^^) sinon je voudrais que mon menu et mes gros titres affichent la police jokerman


  41. Samy décembre 6th

    Comment Arrow

    Chez moi, ca s’affiche bien avec la bonne police (mais parce que je dois sans doute l’avoir sur ma machine, cf cette copie d’écran http://easycaptures.com/fs/uploaded/640/2103548745.png

    Et ton appel Javascript pour Cufon, il est ou ? tu l’as viré ?


  42. Djo décembre 6th

    Comment Arrow

    Tu vois la police « Chiller » sur les titres c’est normal c’est une truetype que j’ai mis pour remplacer la « Jokerman » en attendant, normalement c’est le petit bienvenue en Arial majuscule qui devrait etre en « Jokerman ».

    cf Samy : « Et ton appel Javascript pour Cufon, il est ou ? tu l’as viré ? »

    Moi j’ai fais comme sur ton tuto j’ai tout suivis a la lettre…


  43. Samy décembre 6th

    Comment Arrow

    Et la partie de code située sous « Passons maintenant au bout de code javascript à intégrer pour utiliser le tout. » ?


  44. Djo décembre 6th

    Comment Arrow

    tu parles de ca? : < script src= »js/cufon-yui.js » type= »text/javascript » charset= »utf-8″> < script src= »js/mapoliceexotique.font.js » type= »text/javascript » charset= »utf-8″>


  45. Samy décembre 6th

    Comment Arrow

    J’ai dit « Et la partie de code située SOUS « Passons maintenant au bout de code javascript à intégrer pour utiliser le tout. » ?


  46. Djo décembre 6th

    Comment Arrow

    a oui pardon Bah il y est regarde mon code plus haut


  47. Samy décembre 6th

    Comment Arrow

    Non, il n’apparait pas sur http://www.pena-latina.fr/


  48. Djo décembre 6th

    Comment Arrow

    http://imageshack.us/photo/my-images/17/sanstitreorv.jpg/


  49. Samy décembre 6th

    Comment Arrow

    Il faut le mettre dans le code HTML, pas à l’intérieur de ta CSS…

    Modifie le fichier footer.php et mets le bout de Javascript juste avant (la balise fermante de body)


  50. Djo décembre 6th

    Comment Arrow

    comme ceci? http://imageshack.us/photo/my-images/15/sanstitrepux.jpg/


  51. Samy décembre 6th

    Comment Arrow

    Maintenant, dans ce petit bout de code, remplace $ par jQuery

    Et débrouille toi pour que le fichier http://www.pena-latina.fr/wp-content/themes/twentyten/wp-content/font/jokerman.eot existe

    Et surtout, ne jamais utiliser le thème twentyten (enfin le dossier portant ce nom), c’est le meilleur moyen de perdre tes changements à la prochaine mise à jour de WordPress)


  52. Djo décembre 6th

    Comment Arrow

    Yes j’essaie ca et te tiens au courant, oui je sais que wordpress est chiant pour les maj suivants les plugins et le theme c’est pour ca que je ne met pas a jour ^^


  53. Samy décembre 6th

    Comment Arrow

    Copie ton thème dans un autre dossier, et supprime ensuite twentyten


  54. Djo décembre 6th

    Comment Arrow

    Bon j’ai remplacer les deux $ par jQuery. J’ai créé le dossier wp-content/fonts (dans le dossier twentyten) et y est mis jokerman.eot (car j’avais le dossier fonts mais directement dans wp-content pas dans le theme. Mais je n’est toujours rien :/


  55. Djo décembre 6th

    Comment Arrow

    tu es sur que c’est a mettre dans le footer.php et pas dans le modele de page ou un truc du style ?


  56. Samy décembre 6th

    Comment Arrow

    Tu n’as pas fait la 2e étape (au dessus de « Troisième étape : jQuery »)


  57. Djo décembre 6th

    Comment Arrow

    le code est copier dans ma page .css confere mon screenshot


  58. Samy décembre 6th

    Comment Arrow

    Jamais de code HTML dans un .css :) (ou même de Javascript)


  59. Djo décembre 6th

    Comment Arrow

    http://imageshack.us/photo/my-images/528/sanstitre1oi.png/


  60. Djo décembre 6th

    Comment Arrow

    D’accord mais a ce compte la ton tuto n’explique pas bien ou il faut coller le code a chaque etape


  61. Djo décembre 6th

    Comment Arrow

    j’ai copié tout monde code dans mon footer c pareil


  62. Samy décembre 6th

    Comment Arrow

    Ce n’est pas mon tuto :)


  63. Djo décembre 6th

    Comment Arrow

    ba en tout cas ca marche pas chez moi… :(


  64. Djo décembre 6th

    Comment Arrow

    merci quand meme pour ton aide ^^


  65. Samy décembre 6th

    Comment Arrow

    Parce que les fichiers JS que tu appelles n’existent pas :) il faut les mettre sur le FTP


  66. Djo décembre 6th

    Comment Arrow

    ils y sont regarde mon dernier screen


  67. Djo décembre 6th

    Comment Arrow

    on voit bien que jQuery charge au lancement de la page il y a un second raffraichissement mais pas d’affichage de ma police, il doit y avoir une erreur quelque part !


  68. pocky décembre 6th

    Comment Arrow

    Va faire un tour la dessus, c’est bien mieux que cette « vieille » méthode : http://www.fontsquirrel.com/fontface/generator


  69. Djo décembre 6th

    Comment Arrow

    oui ba j’ai utiliser fontsquirrel deja pour transformer mon fichier jokerman.ttf en jokerman.eot car j’ai pas l’originale de la police payante (raaaah! cpas bien ^^) mais sur ce site il ne t’explique en rien comment coller ta font sur ton site a moins que je ne me trompe ?


  70. pocky décembre 6th

    Comment Arrow

    Lorsque tu génères ta police, un fichier zip est généré. Dans ce zip, tu devrais trouver un fichier css avec le code à mettre dans ta feuille de style. Tu n’auras ensuite plus qu’à modifier les liens d’accès aux fichiers de typo.


  71. pocky décembre 6th

    Comment Arrow

    En dehors du FTP, vérifies les droits sur les fichiers, le repertoire. Essaie de les appeler manuellement via leur adresse pour vérifier leur existence. Etc.. etc… Comporte toi comme un navigateur.


  72. Djo décembre 6th

    Comment Arrow

    Merci pocky j’ai bien collé juste mon bout de code dans le fichier .css

    @font-face { font-family: ‘JokermanRegular’; src: url(‘jokerman-webfont.eot’); font-weight: normal; font-style: normal;

    Et voila le tour est jouer, je n’avais juste pas bien effectué la manip de Fontsquirrel !

    Tu me sauves d’un grand probleme Pocky merci beaucoup a toi et aussi a Samy a qui jai pris la tete alors que cela venait de mon coté merci encore a vous 2 !! et aller faire un tour sur mon site pour voir le resultat :D


  73. Djo décembre 6th

    Comment Arrow

    Erf ! parcontre cela fait completement buggé mes slideshow :/ on dirais que le plugin TheTheImage n’aime aps trop les balises span…


  74. Djo décembre 6th

    Comment Arrow

    Bon finalement je n’y comprends rien la police marche sur mon poste mais pas sur un autre… et quand j’enleve le code @font-face dans mon css mes slideshow ne bug plus mais la font reste !! >< (mais bon tjrs uniquement sur mon ordinateur) Sinon j’ai bien verifier les droits en ecriture de mon fichier font/jokerman-webfont.eot sur mon FTP j’ai tout autorisé


Add Yours

  • Author Avatar

    YOU


Comment Arrow



Trackbacks


About Author

Alexandre

Tenancier de ce blog, je suis avant tout un fan du web et de ses technologies. Si vous voulez en savoir plus, rendez-vous sur la page à propos.