Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
CSS
Personalized fonts !
Typeface.js   Cufón

   sIFR       FLIR
Typeface.js                   Cufón
       JavaScript         Inaccessible
               not stylable
Flash              ...
@font-face
Short history :
     Introduced in CSS2 (1998)
Supported by IE and NS, but not as TTF
       Removed from CSS 2.1
    Show...
Compatible :
     IE 4+
 Firefox 3.5+
  Safari 3.1+
 Opera 10+
Chrome 3.0b+
Benefits :
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
 Insid...
3 lines :

@font-face {
    font-family: "Scrogglet"; /* Give it a name */
    src: url(Scrogglet.eot); /* IE */
    src: ...
Here you go !

h1 {
    font-family: "Scrogglet", Arial, sans-serif;
    color: red;
    font-weight: bold;
    letter-spa...
•   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/grau...
Performances
              FOUT : Flash Of Unstyled Text


Firefox and Opera load the page with a system font
  The others...
Performances
                    Loading




IE loads the font when it encouters @font-face
  Others : As the font is used...
Performances
                 And if loading fails ?


    Firefox & Opera : The text is in system font
Safari : Displays ...
Let’s optimize !
FontForge and FontSquirrel to reduce the palette
          Gzip earn up to 40% weight
         Cache and ...
Lazy Loading ?
                         Load like on Firefox

function lazyLoad() {

 var sRule1 =

 
 "@font-face {" +

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



                ...
Nächste SlideShare
Wird geladen in …5
×

CSS @font-face : Personalized fonts

6.351 Aufrufe

Veröffentlicht am

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)

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

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

×