Nous disposons enfin d’un support de la règle CSS @font-face sur la plupart des navigateurs du marché. On fera un tour d’horizon de leurs implémentations, des avantages et des contraintes que cela apporte, ainsi que quelques bonnes pratiques pour son utilisation.

1. CSS
Des polices personnalisées !

2. Typeface.js Cufón
sIFR FLIR

3. Typeface.js Cufón
JavaScript Inaccessible
pas stylable
Flash PHP
sIFR non imprimable FLIR
Lent Contraignant GD

4. @font-face

5. Petite histoire :
Introduit en CSS2 (1998)
Supporté par IE et NS, mais pas en TTF
Supprimé de CSS 2.1
Apparition dans Safari et Firefox
Ré-introduit en CSS3

6. Compatible :
IE 4+
Firefox 3.5+
Safari 3.1+
Opera 10+
Chrome 3.0b+

7. Avantages :
C’est vous qui gérez !
Maintenabilité
Accessibilité
Performance
Utilisabilité

8. Formats :
IE : EOT
Les autres : TTF, OTF
+ Opera et Chrome : SVG
Bientôt WOFF (Firefox 3.6)

9. TTF & OTF ?
Pas des formats web
Peuvent être piratés facilement
Uniquement utilisable en police libre

10. WOFF & EOT ?
Restriction technique à un site
Inutilisable ailleurs en local ou sur le web
+ dans WOFF
Compression directe
Licence intégrée au fichier

11. 3 lignes :
@font-face {
font-family: "Scrogglet"; /* Nom de famille */
src: url(Scrogglet.eot); /* IE */
src: local("Scrogglet"), url(Scrogglet.ttf) format("truetype");
}

12. Et hop !
h1 {
font-family: "Scrogglet", Arial, sans-serif;
color: red;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}

13. • http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/

14. Examples !
Bons :
•http://www.mozilla.com/en-US/firefox/3.6b3/firstrun/
•http://nicewebtype.com/fonts/graublau-sans-web/
•http://www.kleenhanz.com/
Mauvais :
•http://craigmod.com/journal/font-face/ (2.5Mo de polics)
•http://hsivonen.iki.fi/ (4Mo de polices)

15. Performances
FOUT : Flash Of Unstyled Text
Firefox et Opera chargent la page avec une police système
Les autres : affichent le texte une fois la police chargée
IE n’affiche rien avant que la police soit chargée
si une balise script se situe avant @font-face.

16. Performances
Chargements
IE télécharge la police dès qu’il rencontre @font-face
Les autres : Dès qu’ils le rencontrent dans font-family

17. Performances
Et si le chargement plante ?
Firefox & Opera : Le texte est en police système
Safari : Affiche le texte en police système après 60secs
IE met 10 minutes à faire pareil que Safari
Chrome (beta 3) n’affiche jamais le texte...

18. Optimisons !
FontForge et FontSquirrel pour réduire la palette
Gzip pour gagner jusqu’à +40% de poids
Cache et téléchargements parallèles
Lazy Loading en JavaScript, au moins pour IE
Définissez @font-face avant des <script>
Supprimer les règles @font-face non utilisées

19. Lazy Loading ?
Chargement come sur Firefox
function lazyLoad() {
var sRule1 =
"@font-face {" +
" font-family: 'Yanone';" +
" src: url('/bin/resource.cgi?type=font&sleep=6');" +
" src: local('Yanone'), " +
"url('/bin/resource.cgi?type=font&sleep=6') " +
"format('truetype');" +
"}";
var style1 = document.styleSheets[0];
if ( "function" === typeof(style1.insertRule) ) {
// Firefox, Safari, Chrome
style1.insertRule(sRule1, 0);
}
else if ( "string" === typeof(style1.cssText) ) {
// IE
style1.cssText = sRule1;
}
}

20. On retient ?

21. 3 lignes de CSS

22. Optimisez les performances !

23. Lazy Loading = important

24. Adieu Cufón, Flash, ...

25. http://yves.vg
Yves Van Goethem
novembre 2009 http://twitter.com/yvg
Merci !
Sources :
• http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/
• http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
Ressources :
• http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/
• http://kernest.com/
• http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding
• http://opentype.info/demo/webfontdemo.html
• http://openfontlibrary.org/media/view/media/fonts
Outils :
• http://fontforge.sourceforge.net/
• http://www.fontsquirrel.com/fontface/generator