Depuis quelques temps, il existe enfin une alternative robuste pour obtenir des « titres images ».
Oubliez les images, sIFR, typeface ou autre Cufón car font-face est là et il l’est presque partout !
En effet il est supporté par :
- Opera 10+ ;
- Safari 3.1+ ;
- Firefox 3.5+ ;
- Internet Explorer 5.0+ (avec un format particulier certes).
Reste sur le bord de la route :
- les anciennes versions d’Opera ;
- les anciennes versions de Firefox ;
- les anciennes versions de Safari ;
- Google Chrome (mais ça arrive pour bientôt).
Pour ces navigateurs, il suffira alors de se servir de l’ordre de priorité des polices définies dans font-family pour obtenir une dégradation gracieuse.
Seule contrainte donc, fournir deux formats de police pour satisfaire Internet Explorer. Cet outil de convertion vous aidera à produire la version EOT de votre TTF favorite.
Reste à ne pas abuser de l’effet afin de ne pas surcharger le poids de vos pages, et à bien respecter les législations en utilisant des polices libres de droits.
Dans le cas contraire, je vous recommande chaudement ce site, qui liste le support (par pourcentage) des polices sur les principaux OS.
@font-face
{
font-family:'Scrogglet';
src:url(Scrogglet.eot);
src:local('Scrogglet'),url(Scrogglet.ttf) format('truetype');
}
h1
{
font-family:Scrogglet,Monaco,'Palatino Linotype',sans-serif;
}
Un bon exemple est disponible chez Yves Van Goethem dans le titre de sa page : c’est lui qui m’a soufflé cette idée d’article !
Et en plus c’est son anniversaire aujourd’hui !
Sources :