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 :
13 commentaires ↓
Sifr enterré, c’est clair ! Par contre, cela va engendrer d’autres problèmes… (To be continued on my blog…)
Et le même jour, Steve Souders dit que c’est pas mûr
Il faut aussi vraiment faire attention à la police de fallback. A-t-elle les mêmes propriétés (interlettrage, taille, etc, je suis pas expert typo
) ? Si non, ça peut rendre vraiment dégueu pour tous ceux qui n’ont pas encore un navigateur supportant ça.
Mais oui, c’est cool de savoir que depuis début septembre, on a enfin un moyen standard et accessible de faire plaisir à nos graphistes.
Uhuh, je veux en savoir plus alors (bande de rabat-joie) !
Noté pour les performances, tu fais bien de mettre le lien, merci.
Attention, il n’y a pas qu’une question de perf. Il faut surtout lire ce qu’il appelle FOUT. Sous IE, c’est catastrophique et sous Safari, c’est pas top. Du coup, charger les @font-face après le chargement de la page me semble indispensable vu l’état actuel des implémentations.
font-face est loin d’être mûr. Je l’ai utilisé pour mon profil et une personne sur deux se plaint de ne pas avoir le bon design… et ce même parmi les geeks (version de firefox obsolète car distribution linux, etc). Donc attention avec ces affirmations
Je corrige ça, c’était sur le coup de l’excitation. 😉
Au delà de la maturité technologique, il y a un sérieux frein à l’utilisation des polices typographique via @font-face : Le poids !
En effet, un police typographique au format TrueType comportant l’ensemble des caractères Latin-1, ça pèse très, très lourd (au bas mot 100Ko minimum) sans compter les déclinaisons en gras et en Italique ( et la version gras ET italique !)
Tout le monde est très loin d’avoir du haut débit à la maison, même en France. Alors surcharger un page avec environ 300ko de police typographique… voila quoi… ça va pas passer inaperçu hein !
A titre de référence, Arial pèse près de 1,2Mo pour avoir les versions Normal, Bold, Italic et Bold Italic (bon ok, la plage de caractère de Arial va au delà de Latin-1, mais quand même, ça donne une idée de l’échelle)
Ça tombe bien j’ai lu un article de Steve Souders sur la performance de
font-face.Globalement il disait quand même : à utiliser en cas de nécessité.
Je crois que sous Safari Mac, utiliser local() dans le src envoi une alerte du type « Safari aimerai utiliser la version locale de la police « bidule », autorisez-vous cela ? »…
Sinon, la vrai question est « est-ce qu’on peut utiliser des polices SVG :) » ?
Rien à FOUT (j’assume), les
@font-faceje vais bientôt en utiliser.Jérémie : oui, je le souligne rapidement dans l’article. Néanmoins, c’est à pondérer avec le poids gagné par tous les « titres images » qui n’ont plus lieu d’être. Et ça grimpe vite aussi en poids tout ça.
D’ailleurs, ne jamais oublier les local() ! Ça évite un téléchargement si la police est installée. Bon, peu d’utilisateurs iront installer une police libre de droits sur leur ordi, mais c’est déjà ça de pris.
Laisser un commentaire