We finally have a support of the CSS @font-face rule, on most browsers on the market. There will be an overview of their implementations, advantages and constraints that this brings, as well as some good practices for its use. (This is a translation of my original french presentation http://www.slideshare.net/yvg/css-fontface-des-polices-personnalises)

1. CSS
Personalized fonts !

2. Typeface.js Cufón
sIFR FLIR

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

4. @font-face

5. 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

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

7. Benefits :
You manage :
Maintainability
Accessibility
Performance
Usability

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

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

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

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

12. Here you go !
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 !
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)

15. 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.

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

17. 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.

18. 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

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

20. What do we learn ?

21. 3 lines of CSS

22. Optimize performances !

23. Lazy Loading = important

24. Bye bye Cufón, Flash, ...

25. 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