[CSS3] @font-face / Font Squirrel

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 !