La propriété @font-face intégrée à CSS3 permet d’afficher une police embarquée sur le serveur et ainsi sortir du carcan des polices par défaut imposées pour les sites internet, les courantes Arial, Times New Roman & co.
L’excellent outil Font Squirrel (http://www.fontsquirrel.com/fontface/generator) permet de créer ses propres kits de font-face.
Cet outil est très utile car seuls les navigateurs modernes tels qu’Opera 10+, Firefox 3.5+, Safari 3+ et Chrome 4+ reconnaissent cette propriété CSS3, mais là encore Internet Explorer ne facilite pas les choses en ne reconnaissant qu’un seul format de fichier de fonte (.eot), incompatible avec les autres ! Il est donc nécessaire de systématiquement proposer une double version des polices à télécharger : .ttf (ou .otf) pour le commun des mortels, et une version .eot pour IE. Font Squirrel le fait pour vous !
Une fois vos fichiers convertis à l’aide de Font-Face generator, il vous suffit de les appeler dans vos feuilles de styles de la sorte :
Version pour tout le monde, incluant uniquement la version truetype .ttf :
@font-face { font-family: 'Segoe UI'; src: url('segoeui.ttf') format('truetype'); }
Version prévue dans la feuille de style dédiée à Internet Explorer à l’aide de commentaires conditionnels, incluant la version .eot :
@font-face { font-family: 'Segoe UI'; src: url('segoeui.eot'); }
Concrètement, il suffit ensuite de déclarer le nom de cette police dans la liste des valeurs de la propriété font-family, par exemple :
article { font-family: Segoe UI, Verdana, sans-serif; }
Par ailleurs, les polices de caractères sont généralement assujettis à droit d’auteurs alors utilisez-les en respect de ces droits. De plus, faites attention au poids de celles-ci puisqu’Internet Explorer par exemple télécharge les deux fichiers de police (.eot et .ttf) et non pas seulement celui qui le concerne !
Une des solutions pour éviter ce problème serait d’appeler la police classique .ttf à l’aide d’un commentaire conditionnel excluant Explorer, tel que
<!--[if !IE]>--> <!--<![endif]-->
Enjoy !