(modifié le 26 juin 2017 à 12:02)

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.

Auteur : Mr Xhark

Fondateur du blog et passionné par les nouvelles techno, suivez-moi sur twitter