CSS @font-face : Des polices personnalisées

CSS Des polices personnalisées !

Typeface.js Cufón sIFR FLIR

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

@font-face

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

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

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

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

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

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

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

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

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

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)

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

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

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

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éﬁnissez @font-face avant des <script> Supprimer les règles @font-face non utilisées

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; } }

On retient ?

3 lignes de CSS

Optimisez les performances !

Lazy Loading = important

Adieu Cufón, Flash, ...

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

http://yidille.free.fr	186
http://www.developpez.net	76
http://www.slideshare.net	41
http://localhost	8
http://web.lliseil.fr	5
http://edu.ca.edu	3
http://culturecommunication-nantes.blogspot.com	3
file://	2
http://culturevisuelle.fr	1

CSS @font-face : Des polices personnalisées

by Yves Van Goethem

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 325

Statistics

CSS @font-face : Des polices personnalisées Presentation Transcript