Loading...Le choix des polices d'écriture (font en anglais) dans la conception d'un site est assez restreint, voir standardisé.
Si vous utilisez une police qui n'est pas présente sur l'ordinateur de vos visiteurs elle sera remplacé par une autre (que l'on peut définir grâce au css), ce qui constitue une contrainte pour le webdesign.
Plusieurs solutions de contournement existent pour utiliser la police de votre choix, je vous en présente 7.
L'image statique de remplacement
Le remplacement de texte par une image est à bannir s'il ne s'agit pas d'élément de design tel que bannière, fonds, etc. Si cette méthode était largement utilisée à l'époque du "web 1.0", ce n'est plus le cas aujourd'hui (trop lourd).
Typeface.js
Typeface (javascript) utilise un tracé vectoriel effectué avec les librairies respectives des moteurs de rendu : VML (IE) et SVG pour les autres. Si le JavaScript est désactivé sur le navigateur des les textes par défaut seront affiché dans la police par défaut.
Assez limité, problème si appelé depuis une page imbriquée.
sIFR 3
sIFR3 est une méthode basée sur Flash comportant une zone de texte dynamique. Le flash ne faisant pas nativement parti des navigateurs, cette méthode n'est pas parfaite et mal supportée sur certains périphériques propriétaires comme ceux d'Apple.
Voir démo, tutoriel ici ainsi que sIFR Lite
FLIR
FaceLift Image Replacement est une méthode qui combine PHP avec la libraire GD et JavaScript, très consommateur en ressource côté serveur.
Cufón
Cufon convertir une police (ttf, otf, pfb) en tracé vectoriel JavaScript à inclure dans votre site. Il suffit ensuite de télécharger et d'inclure la librairie Cufón après avoir sélectionné les caractères pouvant être utilisés (alphanumériques, latins, etc.) ce qui en influera directement sur la taille.
C'est une solution assez efficace si vous utilisez cette méthode à plusieurs reprises sur votre site, elle sera plus efficace qu'un remplacement d'images.
Google Font
Google Font Directory est un service sorti en mai 2010 assorti de Google Font API qui permet d'utiliser des polices hébergées par Google. Une solution propre et très bien supportée par les différents navigateur, à privilégier.
Css3
Le CSS3 s'impose tout doucement grâce à l'évolution des navigateurs mais il est encore trop tôt pour n'utiliser que la méthode @font-face
Conclusion
Ce billet comporte de nombreux liens, n'hésitez pas à visiter les différents sites pour apprécier chaque solution.
Enfin, ne perdez pas de vue la lisibilité, l'accessibilité et le référencement de votre site, quelle que soit la solution adoptée.
7 commentaires
Perso, après avoir tout testé. La meilleur méthode pour moi reste Cufòn : Simple, efficace et presque compatible avec tout (Des différences minimes peuvent apparaître entre les navigateurs).
Les + de cette méthode sont :
- Le lissage de police (qu'il n'y a pas avec la méthode du CSS3 sur certains navigateurs)
- La prise en charge de paramètres en CSS3 (mais il faut les indiquer au niveau javascript, pas CSS)
- Le convertisseur cufon qui prend presque tout comme type de font
Par contre, si c'est mal utilisé, c'est très gourmand. Mon premier test faisait 2Mo :).
Il est faux d'affirmer que @font-face n'est pas encore utilisable. IE6 le supporte ! Même si faut lui filer un format spécial (.eot)
Pour ma part j'essaye d'utiliser @font-face quand je peux, et sinon je me rabats sur le bon vieux cufon, qui fait très bien le boulot (même si ce n'est pas parfait).
Super article! Cela fesait longtemps que j'en cherchais un comme celui ci. Favoris!! 🙂
Il existe aussi fontself (www.fontself.com) qui est une société Suisse. Elle permet d'utiliser ses propres fonts (sa propre écriture manuscrite par exemple).
@Amaury: il est vrai que si Cufòn est des plus efficace il n'est pas le plus simple à prendre en main
@Maxime: je ne dis pas que @font-face n'est pas utilisable mais qu'il est trop tôt pour n'utiliser que cette méthode, comme tu le dis toi même dans ton commentaire 🙂
@Xavier83: Merci pour la découverte je ne connaissais pas
Excellent article sur les différentes façons d'utiliser de nouvelles polices d'écriture pour son propre site internet. En général je ne m'embette pas trop je passe par le CSS3 ^_^ sinon j'ai déjà eu à utiliser sIFR ainsi que la librairie de polices de Google. J'espère d'ailleurs qu'elle continuera d'évoluer avec un peu plus de polices 🙂
Excellent article, qui regroupe des informations souvent difficiles à trouver.
J'utilise personnellement les Google Fonts, mais le rendu est très inégal d'une police à l'autres : certaines supportent très mal le lissage, et peuvent être peu lisible ou crénelées avec certaines tailles.