À 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 : 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.
8 Comments
A voir à l’usage, en effet… merci pour ces infos :-)
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 :)
J’ai d’ailleurs abandonné l’idée de réussir un jour à expliquer aux graphistes comment utiliser SIFR (pour le nommer ;-)).
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.
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 !
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.
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….
Petite mise à jour: Font Squirrel (cité plus haut) propose maintenant un générateur de @font-face (dont le fameux format EOT !)