29/09/2009 by Thibaut | Typo, Web design

Remplacement dynamique de fonts – Cufón versus Typeface.js

À ma droite, Cufón. À ma gauche, Typeface.js. Lequel choisir ?

J’avais une petite préférence pour Typeface.js, je ne sais pas exactement pourquoi, peut-être parce que je l’avais découvert avant Cufon (oui je sais il manque l’accent !).

Typeface.js est rapide, très rapide, surtout sous IE. C’est son gros avantage. Il est aussi plus simple à implémenter car il s’applique automatiquement aux H1 à H6 et aux éléments dont la classe est “typeface-js”. Le reste se passe via la feuille de style.

Jusque là, vous allez me dire: vive Typeface.js !

Oui mais, car il y a un mais…

La conversion des polices via l’outil de Typeface.js n’est pas simple et il faut parfois avoir recours à fontforge pour désactiver certains options d’embedding “OS2” (???). Et surtout, le script échoue lamentablement s’il est appelé depuis une page imbriquée via une iframe générée par un overlayer style lightwindow, fancybox et consor. browserStyle is not defined? Il semble se perdre dans les méandres du DOM…

De l’autre côté, l’outil de conversion de Cufon est une merveille, il accepte la plupart des polices sans broncher et permet de limiter leur usage à un ou plusieurs domaines. Il propose même des options obscures que les typo-puristes reconnaitront sûrement. Moi je me suis contenté de la valeur par défaut. Un piège à éviter toutefois : ne spécifiez pas de font-family sous peine de voir ensuite le moteur de rendu s’emméler les pinceaux entre les différentes graisses.

Et ça fonctionne même dans les iframes sus-nommées. Que demande le peuple !

Une intégration automatique? Il faut en effet “appliquer” Cufon sur les éléments voulus à la main. Cela permet notamment de forcer une police sur un élément dont la déclaration font-family ne correspondrait pas dans la CSS, ce qui n’est pas forcément la meilleure idée. Heureusement, ce dernier reconnait les sélecteurs jQuery pour notre plus grand bonheur – veillez juste à charger jQuery avant Cufon pour qu’il reconnaisse ceux-ci ;-)

Update 29/09/2009: En fait la détection automatique du font-family est également disponible dans Cufon mais désactivée par défaut pour contourner un bug dans Opera. Voir les Options de l’API.

Update 06/10/2010: J’entends souvent dire que le texte n’est pas sélectionnable dans Cufon, c’est FAUX. On ne voit en effet pas la sélection dans tous les browsers, mais elle est toutefois effective !

24 thoughts on “Remplacement dynamique de fonts – Cufón versus Typeface.js”

Jean-Marc says:
29/09/2009 at 09:38
A voir à l’usage, en effet… merci pour ces infos :-)
Loïc V. says:
29/09/2009 at 20:09
C’est vrai que ça joue beaucoup le premier découvert. J’ai eu la chance de découvrir les deux en même temps, ça aide à la comparaison.
En tout cas avec Cufón ou typeface, plus de raison d’utiliser les désastreux “Flash Replacement” sans les nommer :)
Thibaut says:
29/09/2009 at 23:07
J’ai d’ailleurs abandonné l’idée de réussir un jour à expliquer aux graphistes comment utiliser SIFR (pour le nommer ;-)).
Jean-Marc says:
01/10/2009 at 01:12
Bien d’accord avec toi. SIFR est le premier que j’ai découvert et utilisé, mais je pense que je serai plus rapidement copain avec typeface et Cufón.
clauce says:
06/11/2009 at 12:05
Bonjour,
à vrai dire, il n’est pas nécessaire de passer par un .js pour remplacer des fonts dans une page web.
Il existe le style @font-face qui fonctionne à merveille, permet un affichage instantané (ce qui n’est pas le cas de cufon et autres) et conserve le texte sélectionnable (pas de remplacement du texte par une image vectorielle).
Pour ceux que cela intéresse, tout ce passe ici : http://www.fontsquirrel.com/fontface
Bonne découverte !
Thibaut says:
06/11/2009 at 12:17
Certes, mais c’est une calamité de générer un .EOT pour Internet Explorer et certaines polices ne peuvent pas être utilisées de la sorte parce que leur license est restrictive.
FontSquirrel fournit des kits mais dès qu’on veut utiliser une police commerciale spécifique, on l’a comme qui dirait dans l’os ;-)
@font-face n’est également pas reconnu par firefox 3.0 et d’autres browsers un peu plus anciens.
Cufon contourne cela de manière élégante en limitant l’usage des polices générées à un ou quelques domaines et surtout cette méthode est compatible avec n’importe quel browser supportant le javascript.
Donc @font-face, oui, bien sûr, mais pas pour tout de suite.
Yukulélé says:
14/04/2010 at 11:29
il y a aussi un autre avantage pour Typeface.js c’est le fait que le texte soit sélectionnable.
En tout ça fait gagner beaucoup de temps, fini les images uniques créé pour chaque titre, la laborieuse librairie GD, ou pire, les lourdes animations flash de remplacement….
Thibaut says:
14/04/2010 at 11:51
Petite mise à jour: Font Squirrel (cité plus haut) propose maintenant un générateur de @font-face (dont le fameux format EOT !)
Laurent says:
05/10/2010 at 19:06
Bonjour,
Je viens de tomber sur votre article, bon je pige pas tout ce qui est décris, mais en revanche à vue de votre expertise sur le sujet, je vous pose la question suivante… Quand vous parlez de Cufon (désolé pour l’accent :) , vous ne mentionnez pas de problème sous IE, hors chez moi (WordPress) sous IE7, ça ne marche pas (et peut être d’autre), en revanche sous firefox, c’est nickel, epouvez-vous éclairer ma lanterne ?
Merci à vous,
Laurent
Thibaut says:
05/10/2010 at 20:14
Effectivement Cufon est tout à fait compatible IE (de 6 à 8, et bientôt 9, bien qu’on puisse déjà contourner le bug dans IE9). Sans avoir le site problématique sous les yeux, il est difficile de dire pourquoi ça ne fonctionne pas chez vous. Peut-être que vous utilisez des selecteurs complexes pour cibler les éléments à “cufoniser” sans avoir chargé jQuery ou un autre framework JS au préalable? En effet, comme le signale la doc “If you want to use complex selectors with Cufón, load a selector engine (JavaScript framework) here.”. Firefox et les autres browsers récents supportent par contre les selecteurs tels que “#nav h2” sans framework grace à, d’après mes souvenirs, la méthode getElementsBySelector.
Laurent says:
06/10/2010 at 00:38
Merci pour votre réponse…
Bon euh là j’avoue c’est trop technique pour moi, je suis un peu largué !
Malgré tout si j’ai compris un peu (j’espere) c’est le fait d’avoir des balises au nom trop complexe, trop imbriquer dans d’autre balise qui font que cela peut mal fonctionner ?
Voici le code ou je met les balises que je veux en image :
Cufon.replace(‘h1, h2, h3, h4, h5, h6, #menu-menu, .slogan, .mybox-title, .mybox-sstitle,.drop-cap, .bottom-left, .intouch-text p, .date, .post-meta, p.post-meta, .contact-button’, { hover: true, });
Voilà je sais pas si ça vous parle…
Désolé de pas vous monter le site en question, c’est parce que pour le moment je le développe en local !
En vous remerciant pour vos précisions !
Laurent
Thibaut says:
06/10/2010 at 07:53
Avoir des sélecteurs complexes n’est pas gênant tant que vous chargez un framework javascript avant Cufon. Je vous conseille d’utilise jQuery. Et comme je le disais dans mon commentaire précédent, si vous ne chargez pas jQuery avant Cufon avec de tels sélecteurs, votre problème vient clairement de là.
Laurent says:
06/10/2010 at 10:35
Et bien il ya bien un script “jqueryeasing.js”, avant, voici à quoi ça ressemble :
<script type="text/javascript" src="/inc/js/jqueryeasing.js”>
<script type="text/javascript" src="/inc/js/ic.js”>
<script type="text/javascript" src="/inc/js/s3Slider.js”>
<script type="text/javascript" src="/inc/js/cufon-yui.js”>
<script type="text/javascript" src="/inc/js/Arial_400.font.js”>
Si ça vous parle ! Encore merci…
Thibaut says:
06/10/2010 at 10:44
Sauvez le contenu de jQuery dans /inc/js/jquery.js et ajoutez <script type="text/javascript" src="/inc/js/jquery.js”></script> avant tous les autres, ça devrait aller mieux ;-)
Laurent says:
06/10/2010 at 11:07
Première chose, je tiens vraiement à vous remercier pour votre aide.
La doc tout en anglais c’est trop hard pour moi !
Bon j’ai pris le code de jQuery, copier/coller dans un fichier texte, renommer en jQuery.js, et coller l’appel de la fonction comme ça dans le code…
<script type="text/javascript" src="/inc/js/jquery.js”>
<script type="text/javascript" src="/inc/js/jquery-1.4.1.js”>
<script type="text/javascript" src="/inc/js/superfish.js”>
<script type="text/javascript" src="/inc/js/jquery.anchor.js”>
<script type="text/javascript" src="/inc/js/hyperion.js”>
<script type="text/javascript" src="/inc/js/jqueryeasing.js”>
<script type="text/javascript" src="/inc/js/ic.js”>
<script type="text/javascript" src="/inc/js/s3Slider.js”>
<script type="text/javascript" src="/inc/js/cufon-yui.js”>
<script type="text/javascript" src="/inc/js/Arial_400.font.js”>
Cufon.replace(‘h1, h2, h3, h4, h5, h6, #menu-menu, .slogan, .mybox-title, .mybox-sstitle,.drop-cap, .bottom-left, .intouch-text p, .date, .post-meta, p.post-meta, .contact-button’, { hover: true, });
Et ça ne marche pas… (sous IE) snif…
Aurais je fais une erreur par rapport à vos conseils ?
Encore Merci
Thibaut says:
06/10/2010 at 11:17
Ah, maintenant jquery est appelé deux fois, donc la manip décrite ne servait rien, jquery était déjà chargé. A part vérifier que Cufon.replace est appelé à la fin de la page ou appelé dans une syntaxe style $(document).ready( function() { ………… }) afin de s’assurer que tout le DOM est chargé au moment de l’appel, je ne vois pas. Il se peut aussi qu’une erreur JS survienne dans IE avant même l’appel de Cufon, du coup le reste des scripts ne s’execute pas.
Il faudrait tester avec le strict minimum niveau javascript: jquery-1.4.1.js, cufon-yui.js, Arial_400.font.js et bien sûr l’appel de Cufon.replace.
Laurent says:
06/10/2010 at 11:35
Merci à vous, donc voilà je n’ai mis que ça :
<script type="text/javascript" src="/inc/js/jquery-1.4.1.js”>
<script type="text/javascript" src="/inc/js/cufon-yui.js”>
<script type="text/javascript" src="/inc/js/Arial_400.font.js”>
Cufon.replace(‘h1, h2, h3, h4, h5, h6, #menu-menu, .slogan, .mybox-title, .mybox-sstitle,.drop-cap, .bottom-left, .intouch-text p, .date, .post-meta, p.post-meta, .contact-button’, { hover: true, });
Et toujours rien…snif !
Laurent says:
07/10/2010 at 01:14
Bon j’ai un peu avancé…
dans le script (cufon.replace) qui gère quelle type de balise on veut remplacer en image, après la nomination de toutes ces balise, j”avais la “fonction”, { hover: true, }, pour gérer les hover, en enlevant cette fonction, ça marche sous IE…
Mais j’ai plus aucun hover sur les images du coup !
Je sais pas si vous connaissez un moyen de contourner ça ?
Merci
Laurent says:
07/10/2010 at 01:17
LA SYNTHAXE !!!!!!!!!!!!!!!!!
Qui marche pas :
Cufon.replace(‘h1’, { hover: true, });
Qui marche :
Cufon.replace(‘h1’, { hover: true });
rrrr…. la virgule qui fâche… en tout cas merci à vous pour votre aide !
Laurent
Thibaut says:
07/10/2010 at 07:41
Ah oui en effet, je ne l’avais pas vue cette virgule de trop et c’est vrai qu’elle m’a souvent joué des tours aussi (notamment lorsqu’on utilise ce genre d’object javascript pour le passer à swfobjects). Le pire c’est que dans ce cas, IE ne fait rien mais ne rapporte aucune erreur non plus !
dubois says:
23/11/2010 at 12:03
Bonjour à tous !
Cufon j’adore !
Mais avec l’arrivée d’IE9, je n’ai toujours pas trouvé comment afficher les fonts sspécifiques car Cufon n’est pas reconnu.
J’ai trouvé sur un site ceci à ajouter pour corriger le bug mais ….nada !
</code
Alors quelle est la solution ?
Merci par avance !
Thibaut says:
23/11/2010 at 12:29
Celle-ci ? http://themeforest.net/forums/thread/fix-for-cufon-not-working-in-ie9beta/31932
Il y a également une nouvelle version de Cufon depuis le 24/10, voir sur le site officiel http://cufon.shoqolate.com/generate/
dubois says:
23/11/2010 at 14:37
OK ! effectivement ça marche avec la nouvelle version.
Merci.
Michael says:
24/02/2011 at 05:33
Il y a aussi ce petit javascript qui fonctionne à merveille et ça depuis plus longtemps que cufon et consorts… Fontjazz