Parmi les solutions disponibles pour afficher des titres avec une police de caractère sortant des sentiers battus, Typekit sort du lot. Si SIFR, FaceLift, ou Typeface.js s’appuient globalement sur la technologie Flash et Cufon sur Javascript, Typekit quant à lui s’appuie sur le standard CSS3 et la propriété @font-face pour faire son petit effet. Frambi-framboise sur le gâteau, cette propriété @font-face est prise en charge par les navigateurs modernes (Firefox 3+, Safari 3.1+) mais aussi par Internet Explorer à partir de la version 6. A noter que @font-face ne fonctionne pas avec Google Chrome.
Si vous désirez en savoir plus sur Typekit, je passe le relais à Auré de All For Design qui nous gâte avec Typographie et Web : la solution Typekit, un article très complet sur la solution proposée par Typekit et qui aborde également les questions liées à la gestion des droits concernant les polices de caractères.
En prime nous avons droit à quelques mots de Jean François Porchez, directeur de Typofonderie à l’origine de la création de nombreuses polices de caractère de qualité comme Ambroise, Apolline, Bienvenue, Costa, Dereon, Le Monde, Parisine ou encore Sabon Next.
J’ai testé Typekit sur mon site, et bien que le résultat le semble sympa, j’ai eu plusieurs soucis, dont des problèmes de lisibilité de la typo que j’avais retenue sous Windows XP, à cause vraisemblablement de ClearType.
Typekit pose aussi le problème de la nécessité d’avoir JS activé, alors que @font-face ne devrait pas le nécessiter…
Oui, tout à fait d’accord, c’est pour ces raisons d’ailleurs que je me fais rarement l’écho des différentes techniques pour avoir une belle typographie dans les pages web. Et ce n’est pas faute d’attendre ça depuis, mettons plus de 10 ans déjà !
Je faisais plutôt la promotion de l’article d’Auré qui met notamment l’accent sur la gestion des droits liés aux polices de caractères.
Perso je l’utilise sur des sites clients depuis quelques mois et aucun souci, que du bonheur ! Pour ce qui est du javascript, bien sûr c’est pas l’idéal mais on peut toujours proposer une police alternative pour ceux qui ne l’ont pas d’activé, non ?
Ce qui est important avec Typekit c’est qu’il permet une gestion facilitée des droits. Beaucoup de monde utilisent des polices via Cufon, sIFR ou encore avec font-face sans se soucier s’ils ont le droit de les utiliser. Avec Typekit, le problème ne se pose plus. Certes, c’est pas parfait, et nous français, on n’est jamais satisfaits ( ^^) mais c’est une solution qui a le mérite d’exister et qui apporte déjà une bonne solution à l’utilisation d’autres polices sur le web ! 😉
Hello bruno,
Merci beaucoup pour le lien 😉
Content que l’article t’ai plu.
Petite rectification : Cufon utilise JavaScript et non Flash. Cela reste relativement souple par rapport à d’autres solutions, mais bien entendu @font-face est le rêve ultime.
Merci dew, c’est corrigé.
Perso pour les typo « spéciales » j’utilise la propriété CSS3 :
@font-face {
font-family: 'MaPolice';
src: url('../fonts/MaPolice.eot');
src: local('MaPolice Regular'), local('MaPolice), url('../fonts/MaPolice.ttf') format('truetype');
}
Je récupère une police libre de droit sur divers sites et je la transforme en .eot grace à http://www.fontsquirrel.com/fontface/generator
Bonjour,
De mon côté, j’ai commencé un comparatif des solutions de gestion des polices de caractères (@font-face vs sIFR vs typeface.js vs Cufon vs FLIR…), si cela vous intéresse, je l’ai posté sur ce blog:
http://blog.socialcompare.com/fr/2010/05/28/tableau-comparatif-solutions-typographie-web-affichant-belles-polices-caracteres-font-face-vs-sifr-vs-typeface-js-vs-cufon-vs-flir/
Vous pouvez même rajouter votre grain de sel et modifier le tableau ici (car il est public et éditable par tous):
http://socialcompare.com/fr/comparison/comparison-of-web-fonts-solutions-7d0b3w9
Bonne journée,
Vanina