CSS @font-face : Personalized fonts

6,152 views
5,968 views

Published on

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)

Published in: Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,152
On SlideShare
0
From Embeds
0
Number of Embeds
1,409
Actions
Shares
0
Downloads
77
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • CSS @font-face : Personalized fonts

    1. 1. CSS Personalized fonts !
    2. 2. Typeface.js Cufón sIFR FLIR
    3. 3. Typeface.js Cufón JavaScript Inaccessible not stylable Flash PHP sIFR not printable FLIR Slow Constraining GD
    4. 4. @font-face
    5. 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. 6. Compatible : IE 4+ Firefox 3.5+ Safari 3.1+ Opera 10+ Chrome 3.0b+
    7. 7. Benefits : You manage : Maintainability Accessibility Performance Usability
    8. 8. Formats : IE : EOT Other : TTF, OTF + Opera et Chrome : SVG WOFF (Firefox 3.6)
    9. 9. TTF & OTF ? Not web formats May be easily pirated Only free fonts are usable
    10. 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. 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. 12. Here you go ! h1 { font-family: "Scrogglet", Arial, sans-serif; color: red; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
    13. 13. • http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/
    14. 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. 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. 16. Performances Loading IE loads the font when it encouters @font-face Others : As the font is used in a font-family
    17. 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. 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. 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. 20. What do we learn ?
    21. 21. 3 lines of CSS
    22. 22. Optimize performances !
    23. 23. Lazy Loading = important
    24. 24. Bye bye Cufón, Flash, ...
    25. 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

    ×