CSS @font-face : Personalized fonts

CSS Personalized fonts !

Typeface.js Cufón sIFR FLIR

Typeface.js Cufón JavaScript Inaccessible not stylable Flash PHP sIFR not printable FLIR Slow Constraining GD

@font-face

Short history : Introduced in CSS2 (1998) Supported by IE and NS, but not as TTF Removed from CSS 2.1 Shows up in Safari and Firefox Re-introduced in CSS3

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

Beneﬁts : You manage : Maintainability Accessibility Performance Usability

Formats : IE : EOT Other : TTF, OTF + Opera et Chrome : SVG WOFF (Firefox 3.6)

TTF & OTF ? Not web formats May be easily pirated Only free fonts are usable

WOFF & EOT ? Technical restriction to a website Unusable locally or elswhere on the web + in WOFF Inside compression (no need for gzip) License integrated

3 lines : @font-face { font-family: "Scrogglet"; /* Give it a name */ src: url(Scrogglet.eot); /* IE */ src: local("Scrogglet"), url(Scrogglet.ttf) format("truetype"); }

Here you go ! 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 ! Good : •http://www.mozilla.com/en-US/firefox/3.6b3/firstrun/ •http://nicewebtype.com/fonts/graublau-sans-web/ •http://www.kleenhanz.com/ Bad : •http://craigmod.com/journal/font-face/ (2.5Mo fonts) •http://hsivonen.iki.fi/ (4Mo fonts)

Performances FOUT : Flash Of Unstyled Text Firefox and Opera load the page with a system font The others display the text when the font is loaded IE doesn’t display anything until the font isn’t loaded if a scipt tag appears before @font-face.

Performances Loading IE loads the font when it encouters @font-face Others : As the font is used in a font-family

Performances And if loading fails ? Firefox & Opera : The text is in system font Safari : Displays the text in system font after 60sec IE takes 10 minutes to do the same as Safari Chrome (beta 3) ... well it never shows up.

Let’s optimize ! FontForge and FontSquirrel to reduce the palette Gzip earn up to 40% weight Cache and parallel downloads Lazy Loading in JavaScript, at least for IE Set @font-face before a <script> tag Delete unused @font-face rules

Lazy Loading ? Load like on 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; } }

What do we learn ?

3 lines of CSS

Optimize performances !

Lazy Loading = important

Bye bye Cufón, Flash, ...

http://yves.vg Yves Van Goethem novembre 2009 http://twitter.com/yvg Thanks ! 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 Tools : • http://fontforge.sourceforge.net/ • http://www.fontsquirrel.com/fontface/generator

http://www.papiersdundev.com	1377
http://www.slideshare.net	13
http://blog.gabrieleromanato.com	9
http://onwebdev.blogspot.com	6
http://feeds.feedburner.com	2
http://onwebdev.blogspot.com.es	1

CSS @font-face : Personalized fonts

by Yves Van Goethem

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 1,408

Statistics