SQUEEZING THE BEST
                             OUT OF WEBFONTS




                                                      ...
WHAT’S THE PLAN, SAM

             javascript solutions
             @font-face overview
             webfont services
   ...
JAVASCRIPT-BASED
                    FONT SOLUTIONS



Friday, February 19, 2010
Friday, February 19, 2010
SIFR
              Configuration
                  Custom js/css styling syntax

              Internal Technique
         ...
http://bit.ly/typefacejs
Friday, February 19, 2010
http://bit.ly/cufon
Friday, February 19, 2010
CUFÓN
              Configuration
               Styling type with CSS as normal


              Runtime Technique
        ...
CUFÓN
              Configuration
               Styling type with CSS as normal


              Runtime Technique
        ...
CUFÓN
              Configuration
               Styling type with CSS as normal


              Runtime Technique
        ...
http://bit.ly/facelift
Friday, February 19, 2010
FACELIFT
              Configuration
                   Styling type with CSS as normal


              Runtime Technique
 ...
FACELIFT
              Configuration
                   Styling type with CSS as normal


              Runtime Technique
 ...
FACELIFT
              Configuration
                   Styling type with CSS as normal


              Runtime Technique
 ...
sIFR                  typeface.js                Cufón                  Facelift


    Technologies            Javascript,...
30,000 ms
                            PERFORMANCE
                             Milliseconds to replace 120 elements on a p...
THE JS SOLUTION CONCLUSION

             sIFR
                  Thx for the good times. xoxo.
             Facelift
      ...
@FONT-FACE




Friday, February 19, 2010
@FONT-FACE




Friday, February 19, 2010
@FONT-FACE




Friday, February 19, 2010
BROWSER SUPPORT

                            @font-face           svg fonts               rich type
                      ...
BROWSER SUPPORT

                            @font-face           svg fonts               rich type
                      ...
95% SUPPORT OF @FONT-FACE
                                                    IE 6.0
                                     ...
LICENSING




Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
FONT FORMAT PROPOSALS

             .webfont ➞ .webOTF ➞ WOFF
                  All foundries <3 it
                  Mozi...
WEBFONT SERVICES




Friday, February 19, 2010
WEBFONT
                OBFUSCATION
                        SERVICES
                            ..also cdn optimization g...
TYPEKIT

             From Small Batch, Inc: Jeff Veen, etc

             Automating @font-face css declarations, ttf/eot, ...
TYPEKIT

             From Small Batch, Inc: Jeff Veen, etc

             Automating @font-face css declarations, ttf/eot, ...
TYPEKIT

             From Small Batch, Inc: Jeff Veen, etc

             Automating @font-face css declarations, ttf/eot, ...
TYPOTHEQUE


             Actual foundry, their fonts and others

             Files cached for 5 minutes

             Re...
TYPOTHEQUE


             Actual foundry, their fonts and others

             Files cached for 5 minutes

             Re...
KERNEST

             A mix of free and commercial fonts, 100+

             $0-15/font/year

             CSS only

     ...
KERNEST

             A mix of free and commercial fonts, 100+

             $0-15/font/year

             CSS only

     ...
FONTDECK



             Not launched yet

             Great team behind it from Clearleft,
             including Richar...
FONTDECK



             Not launched yet

             Great team behind it from Clearleft,
             including Richar...
YO, I ROLL SOLO
                                 Goin it alone




Friday, February 19, 2010
ROLL YOUR OWN


        1.You get fonts
        2.You verify the license permits your plans
        3.You serve fonts to b...
@FONT-FACE SYNTAX




Friday, February 19, 2010
@FONT-FACE SYNTAX




Friday, February 19, 2010
@FONT-FACE SYNTAX




Friday, February 19, 2010
FONT SQUIRREL GENERATOR




Friday, February 19, 2010
FONT SQUIRREL GENERATOR




Friday, February 19, 2010
ACQUIRING FONTS

             Free fonts

                 Fontsquirrel, League of Movable Type,
                 WebFonts...
ACQUIRING FONTS

             Free fonts

                 Fontsquirrel, League of Movable Type,
                 WebFonts...
ACQUIRING FONTS

             Free fonts

                 Fontsquirrel, League of Movable Type,
                 WebFonts...
ACQUIRING FONTS

             Free fonts

                 Fontsquirrel, League of Movable Type,
                 WebFonts...
PROPRIETARY TYPEFACE


             Client owns the IP

             Client needs to know the risks

             Brief th...
COMMERCIAL TYPEFACE


             If client already owns it, they likely don’t own a
             web/embedding license

...
COMMERCIAL TYPEFACE


             If client already owns it, they likely don’t own a
             web/embedding license

...
FONTSPRING




Friday, February 19, 2010
FONTSPRING




Friday, February 19, 2010
PICKING THE RIGHT FONT

             Step One: Test it.
             Step Two: Test it More


        Target Combos:
     ...
PICKING THE RIGHT FONT

             Step One: Test it.
             Step Two: Test it More


        Target Combos:
     ...
PICKING THE RIGHT FONT

             Step One: Test it.
             Step Two: Test it More


        Target Combos:
     ...
FEATURE DETECTION
          /*!   isFontFaceSupported()
           *    @font-face detection v1.0
           *    Paul Iri...
else {

           // Create variables for dedicated @font-face test
           var doc = document,

            FEATURE D...
spn.innerHTML = '........';
                spn.id        = 'fonttest';

                body.appendChild(spn);

         ...
Modernizr
   Making use of tomorrow’s technologies, today!

Friday, February 19, 2010
HTML5 & CSS3 Coolness™




Friday, February 19, 2010
HTML5 & CSS3 Coolness™
             Rounded corners       2D Transformations
             @font-face fonts      CSS Gradie...
Friday, February 19, 2010
Feature Detection
                            Just Detect It™




Friday, February 19, 2010
Friday, February 19, 2010
Native                         No Native
      Implementation                 Implementation
      h1 {
                  ...
Friday, February 19, 2010
OM
                                 G it
                            onl       ’s
                                y7
     ...
BACK TO FONTS...




Friday, February 19, 2010
PROTECTING THE FONT


             Subset!
             data: URI
             Referrer control
             Cross-Origin ...
PROTECTING THE FONT


             Subset!
             data: URI
             Referrer control
             Cross-Origin ...
PROTECTING THE FONT


             Subset!
             data: URI
             Referrer control
             Cross-Origin ...
PROTECTING THE FONT
        @font-face {
            font-family: "vera-sans-1";
            src: url(data:font/otf;base64...
PROTECTING THE FONT


             Subset!
             data: URI
             Referrer control
             Cross-Origin ...
PROTECTING THE FONT

          # disallow non-local referrers
          SetEnvIfNoCase Referer "^http://w+.your-domain.com...
OPTIMIZATION

             Subset
             gzip
             EOTFast




Friday, February 19, 2010
OPTIMIZATION

             Subset
             gzip
             EOTFast




Friday, February 19, 2010
OPTIMIZATION

             Subset
             gzip
             EOTFast




Friday, February 19, 2010
RENDERING




Friday, February 19, 2010
CREDIT WHERE CREDIT IS DUE


             Opera: introduced the spec

             IE: @font-face since IE4, <ruby>, core
...
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
FOUT
        Your options:
             Deal.
             gzip
             Subset
             data-uri
             fon...
FOUT
        Your options:
             Deal.
             The            x-height The x-height
             gzip
        ...
FOUT
        Your options:
             Deal.
             The            x-height The x-height
             gzip
        ...
FOUT
        Your options:
             Deal.
             gzip
             Subset
             data-uri
             fon...
FOUT
        Your options:
             Deal.
             gzip
             Subset
             data-uri
             fon...
RENDERING QUALITY




Friday, February 19, 2010
TRICKS

             disable cleartype
             text-rendering
             text-shadow



Friday, February 19, 2010
TRICKS

             disable cleartype
             text-rendering
         h2, p {
         font: 36px/44px 'OldSansBlack...
TRICKS

             disable cleartype
             text-rendering
             text-shadow



Friday, February 19, 2010
TRICKS

             disable cleartype
             text-rendering
             text-shadow



Friday, February 19, 2010
GO FORTH AND MAKE
              IT LOOK GOOD.
                            Don’t go crazy on it, though.




Friday, Februa...
GO FORTH AND MAKE
              IT LOOK GOOD.
                            Don’t go crazy on it, though.




Friday, Februa...
Squeeeezing the best out of webfonts



         Muchas thankos!

         More:
         http:/
              /paulirish....
Upcoming SlideShare
Loading in...5
×

Squeezing The Best Out Of Webfonts

9,829

Published on

Published in: Design
4 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,829
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
129
Comments
4
Likes
22
Embeds 0
No embeds

No notes for slide

Squeezing The Best Out Of Webfonts

  1. 1. SQUEEZING THE BEST OUT OF WEBFONTS Paul Irish Molecular Inc. Emerging Interactions & Front-end Dev Friday, February 19, 2010
  2. 2. WHAT’S THE PLAN, SAM javascript solutions @font-face overview webfont services doing @font-face the right way licensing Friday, February 19, 2010
  3. 3. JAVASCRIPT-BASED FONT SOLUTIONS Friday, February 19, 2010
  4. 4. Friday, February 19, 2010
  5. 5. SIFR Configuration Custom js/css styling syntax Internal Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties from sifr-config.js 3. Placing Flash SWFs Friday, February 19, 2010
  6. 6. http://bit.ly/typefacejs Friday, February 19, 2010
  7. 7. http://bit.ly/cufon Friday, February 19, 2010
  8. 8. CUFÓN Configuration Styling type with CSS as normal Runtime Technique 1. Any selector engine currently present is used 2. Reading style properties through getComputedStyle() 3. Reads JSON representation of VML font and transforms into... 4. VML glyph rendering for IE, Canvas for the rest Friday, February 19, 2010
  9. 9. CUFÓN Configuration Styling type with CSS as normal Runtime Technique 1. Any selector engine currently present is used 2. Reading style properties through getComputedStyle() 3. Reads JSON representation of VML font and transforms into... 4. VML glyph rendering for IE, Canvas for the rest Friday, February 19, 2010
  10. 10. CUFÓN Configuration Styling type with CSS as normal Runtime Technique 1. Any selector engine currently present is used 2. Reading style properties through getComputedStyle() 3. Reads JSON representation of VML font and transforms into... 4. VML glyph rendering for IE, Canvas for the rest Friday, February 19, 2010
  11. 11. http://bit.ly/facelift Friday, February 19, 2010
  12. 12. FACELIFT Configuration Styling type with CSS as normal Runtime Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties through getComputedStyle() 3. Calling generate.php with text and style Friday, February 19, 2010
  13. 13. FACELIFT Configuration Styling type with CSS as normal Runtime Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties through getComputedStyle() 3. Calling generate.php with text and style Friday, February 19, 2010
  14. 14. FACELIFT Configuration Styling type with CSS as normal Runtime Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties through getComputedStyle() 3. Calling generate.php with text and style Friday, February 19, 2010
  15. 15. sIFR typeface.js Cufón Facelift Technologies Javascript, Flash Javascript, Canvas, VML Javascript, Canvas,VML Javascript, PHP, GD or ImageMagick Selectable text? Yes, but not the Supported WITH visual Not supported yet. Only in Firefox. No surrounding elements if affordance Solutions for all visual affordance. the selection starts browsers minus Opera inside the SWF exist. Hover state? Supported In progress Supported Supported Printable? Print.css lets you define Supported. Supported. <img> prints fine. a non-flash fallback Licensing issues Some. SWF can be TBD. JS file can be TBD. Cufon file can be None. Font file held on paired with a domain. reused with typeface.js paired with a domain. backend and not on any domain. distributed Minified javascript 28.8k 11.7k 14.2k 18.4k size Fontin Sans (basic 12k swf 30k js 16k js n/a characters) size   Gentium (full set) 232k swf 1334k js 400k js n/a Friday, February 19, 2010
  16. 16. 30,000 ms PERFORMANCE Milliseconds to replace 120 elements on a popular homepage Empty cache. Average of five runs. 22,500 ms 15,000 ms 7,500 ms 0 ms sIFR Facelift Cufón typeface.js Firefox 3 IE 7 IE 6 Friday, February 19, 2010
  17. 17. THE JS SOLUTION CONCLUSION sIFR Thx for the good times. xoxo. Facelift Font file protected, safe with licensing rules Requires PHP and HTTP requests Typeface.js Quality and performance inferior to Cufon. (‘cept for selection) Cufón Full of win. Friday, February 19, 2010
  18. 18. @FONT-FACE Friday, February 19, 2010
  19. 19. @FONT-FACE Friday, February 19, 2010
  20. 20. @FONT-FACE Friday, February 19, 2010
  21. 21. BROWSER SUPPORT @font-face svg fonts rich type (eot or ttf/otf) (uses @font-face) libraries (sIFR, Cufon, etc) IE IE 5+ IE 6+ Firefox FF 3.5 FF 3.5 + FF 2+ (.woff in 3.6) Safari 3.1+ 3.1+ 3+ (incl. mobile safari) Chrome Chrome 4.0 Chrome 0.3 + 1+ (stable) Opera Opera 10 Opera 9 9.2+ (sometimes) Friday, February 19, 2010
  22. 22. BROWSER SUPPORT @font-face svg fonts rich type (eot or ttf/otf) (uses @font-face) libraries (sIFR, Cufon, etc) IE IE 5+ IE 6+ Firefox FF 3.5 FF 3.5 + FF 2+ (.woff in 3.6) Safari 3.1+ 3.1+ 3+ (incl. mobile safari) Chrome Chrome 4.0 Chrome 0.3 + 1+ (stable) Opera Opera 10 Opera 9 9.2+ (sometimes) Friday, February 19, 2010
  23. 23. 95% SUPPORT OF @FONT-FACE IE 6.0 12% IE 8.0 23% IE 7.0 19% Firefox 3.0 5% Saf3, Opera, Chrome 16% Firefox 3.5 21% Safari 4.0 4% Friday, February 19, 2010
  24. 24. LICENSING Friday, February 19, 2010
  25. 25. Friday, February 19, 2010
  26. 26. Friday, February 19, 2010
  27. 27. Friday, February 19, 2010
  28. 28. Friday, February 19, 2010
  29. 29. Friday, February 19, 2010
  30. 30. Friday, February 19, 2010
  31. 31. FONT FORMAT PROPOSALS .webfont ➞ .webOTF ➞ WOFF All foundries <3 it Mozilla is championing it. It’s in 3.6 EOT-Lite ➞ CWT Proposed by Ascender EOT minus the domain binding and MTX compression Works in IE today Friday, February 19, 2010
  32. 32. WEBFONT SERVICES Friday, February 19, 2010
  33. 33. WEBFONT OBFUSCATION SERVICES ..also cdn optimization goodness.. Friday, February 19, 2010
  34. 34. TYPEKIT From Small Batch, Inc: Jeff Veen, etc Automating @font-face css declarations, ttf/eot, no fallback They deal with licensing, you pay buffet style, 250+ fonts All files hosted on CDN. Cached for 5 minutes, with etags Friday, February 19, 2010
  35. 35. TYPEKIT From Small Batch, Inc: Jeff Veen, etc Automating @font-face css declarations, ttf/eot, no fallback They deal with licensing, you pay buffet style, 250+ fonts All files hosted on CDN. Cached for 5 minutes, with etags Friday, February 19, 2010
  36. 36. TYPEKIT From Small Batch, Inc: Jeff Veen, etc Automating @font-face css declarations, ttf/eot, no fallback They deal with licensing, you pay buffet style, 250+ fonts All files hosted on CDN. Cached for 5 minutes, with etags Friday, February 19, 2010
  37. 37. TYPOTHEQUE Actual foundry, their fonts and others Files cached for 5 minutes Relatively small typeface roster Free - $, per font or for typeface family Friday, February 19, 2010
  38. 38. TYPOTHEQUE Actual foundry, their fonts and others Files cached for 5 minutes Relatively small typeface roster Free - $, per font or for typeface family Friday, February 19, 2010
  39. 39. KERNEST A mix of free and commercial fonts, 100+ $0-15/font/year CSS only No caching Friday, February 19, 2010
  40. 40. KERNEST A mix of free and commercial fonts, 100+ $0-15/font/year CSS only No caching Friday, February 19, 2010
  41. 41. FONTDECK Not launched yet Great team behind it from Clearleft, including Richard Rutter & Jon Tan Friday, February 19, 2010
  42. 42. FONTDECK Not launched yet Great team behind it from Clearleft, including Richard Rutter & Jon Tan Friday, February 19, 2010
  43. 43. YO, I ROLL SOLO Goin it alone Friday, February 19, 2010
  44. 44. ROLL YOUR OWN 1.You get fonts 2.You verify the license permits your plans 3.You serve fonts to browsers. 4.You protect the font data as much as possible 5.You win life Friday, February 19, 2010
  45. 45. @FONT-FACE SYNTAX Friday, February 19, 2010
  46. 46. @FONT-FACE SYNTAX Friday, February 19, 2010
  47. 47. @FONT-FACE SYNTAX Friday, February 19, 2010
  48. 48. FONT SQUIRREL GENERATOR Friday, February 19, 2010
  49. 49. FONT SQUIRREL GENERATOR Friday, February 19, 2010
  50. 50. ACQUIRING FONTS Free fonts Fontsquirrel, League of Movable Type, WebFonts.info wiki Proprietary fonts Custom-designed typefaces for your client Commercial fonts Friday, February 19, 2010
  51. 51. ACQUIRING FONTS Free fonts Fontsquirrel, League of Movable Type, WebFonts.info wiki Proprietary fonts Custom-designed typefaces for your client Commercial fonts Friday, February 19, 2010
  52. 52. ACQUIRING FONTS Free fonts Fontsquirrel, League of Movable Type, WebFonts.info wiki Proprietary fonts Custom-designed typefaces for your client Commercial fonts Friday, February 19, 2010
  53. 53. ACQUIRING FONTS Free fonts Fontsquirrel, League of Movable Type, WebFonts.info wiki Proprietary fonts Custom-designed typefaces for your client Commercial fonts Friday, February 19, 2010
  54. 54. PROPRIETARY TYPEFACE Client owns the IP Client needs to know the risks Brief them on alternatives and considerations If you do it right, you should Friday, February 19, 2010
  55. 55. COMMERCIAL TYPEFACE If client already owns it, they likely don’t own a web/embedding license Otherwise, read the EULA. Talk the foundry. Communicate about your protection techniques. Friday, February 19, 2010
  56. 56. COMMERCIAL TYPEFACE If client already owns it, they likely don’t own a web/embedding license Otherwise, read the EULA. Talk the foundry. Communicate about your protection techniques. Friday, February 19, 2010
  57. 57. FONTSPRING Friday, February 19, 2010
  58. 58. FONTSPRING Friday, February 19, 2010
  59. 59. PICKING THE RIGHT FONT Step One: Test it. Step Two: Test it More Target Combos: FF/Win, IE6&7/Win, Saf on OSX Friday, February 19, 2010
  60. 60. PICKING THE RIGHT FONT Step One: Test it. Step Two: Test it More Target Combos: FF/Win, IE6&7/Win, Saf on OSX Friday, February 19, 2010
  61. 61. PICKING THE RIGHT FONT Step One: Test it. Step Two: Test it More Target Combos: FF/Win, IE6&7/Win, Saf on OSX Friday, February 19, 2010
  62. 62. FEATURE DETECTION /*! isFontFaceSupported() * @font-face detection v1.0 * Paul Irish - 9/9/09 * MIT License */ var isFontFaceSupported = (function(){ // allows overloading var fontret = new Boolean(); // IE supports EOT and has had EOT support since IE 5. // This is a proprietary standard (ATOW) and thus this off-spec, // proprietary test for it is acceptable. if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true; else { // Create variables for dedicated @font-face test var doc = document, st = doc.createElement('style'), spn = doc.createElement('span'), wid, nwid, isFakeBody = false, body = doc.body, callback, isCallbackCalled; Friday, February 19, 2010
  63. 63. else { // Create variables for dedicated @font-face test var doc = document, FEATURE DETECTION st = doc.createElement('style'), spn = doc.createElement('span'), wid, nwid, isFakeBody = false, body = doc.body, callback, isCallbackCalled; // The following is a font-face + glyph definition for the . character: st.textContent = "@font-face{font-family:testfont;src:url('data:font/ ttf;base64,................)}"; doc.getElementsByTagName('head')[0].appendChild(st); spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); if (!body){ body = docElement.appendChild(doc.createElement(fontface)); isFakeBody = true; } // the data-uri'd font only has the . glyph; which is 3 pixels wide. spn.innerHTML = '........'; spn.id = 'fonttest'; body.appendChild(spn); wid = spn.offsetWidth; spn.style.font = '99px testfont,_,serif'; // needed for the CSSFontFaceRule false positives (ff3, chrome, op9) Friday, Februaryfontret = wid !== spn.offsetWidth; 19, 2010
  64. 64. spn.innerHTML = '........'; spn.id = 'fonttest'; body.appendChild(spn); FEATURE DETECTION wid = spn.offsetWidth; spn.style.font = '99px testfont,_,serif'; // needed for the CSSFontFaceRule false positives (ff3, chrome, op9) fontret = wid !== spn.offsetWidth; var delayedCheck = function(){ fontret = wid !== spn.offsetWidth; callback && (isCallbackCalled = true) && callback(fontret); isFakeBody && setTimeout(function() {body.parentNode.removeChild(body)}, 50); } setTimeout(delayedCheck,100); } // allow for a callback fontret._onready = function(fn){ (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn); } return function(){ return fontret || wid !== spn.offsetWidth; }; })(); Friday, February 19, 2010
  65. 65. Modernizr Making use of tomorrow’s technologies, today! Friday, February 19, 2010
  66. 66. HTML5 & CSS3 Coolness™ Friday, February 19, 2010
  67. 67. HTML5 & CSS3 Coolness™ Rounded corners 2D Transformations @font-face fonts CSS Gradients Canvas SVG rgba() colors Geolocation border-image CSS Columns box-shadow LocalStorage HTML5 Audio & Video Web Workers CSS Animations Offline Web Apps CSS Transitions …and so on and so on. Friday, February 19, 2010
  68. 68. Friday, February 19, 2010
  69. 69. Feature Detection Just Detect It™ Friday, February 19, 2010
  70. 70. Friday, February 19, 2010
  71. 71. Native No Native Implementation Implementation h1 { .no-fontface h1 { // use cool custom font! // far less awesome font // it’ll rock! } } if (Modernizr.fontface == false){ // Cufon fallback } Friday, February 19, 2010
  72. 72. Friday, February 19, 2010
  73. 73. OM G it onl ’s y7 k! Friday, February 19, 2010
  74. 74. BACK TO FONTS... Friday, February 19, 2010
  75. 75. PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
  76. 76. PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
  77. 77. PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
  78. 78. PROTECTING THE FONT @font-face { font-family: "vera-sans-1"; src: url(data:font/otf;base64,AAEAAAASAQAABAAgRkZUTTjXPEcAA FoUAAAAHEdERUYAJwA6AABXgAAAAB5HUE9TIN8cOQAAV9AAAAJCR1NVQrj/uP4A AFegAAAAME9TLzK1ov3BAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEBqAAAA FZjbWFwczI52AAAAtAAAAFaY3Z0IBGE48kAAAokAAABxmZwZ23nl/HEAAAELD AAAAItnYXNwAAcABwAAV3QAAAAMZ2x5ZhcqOIkAAAxYAAAr0GhlYWT0aRi3AAABLA Subset! AAADZoaGVhD0EGTgAAAWQAAAAkaG10eBfPCDUAAAIAAAAA0GxvY2EOCQRGAAAL7AA AAGptYXhwBGkF2QAAAYgAAAAgbmFtZYWMOCMAADgoAAAewHBvc3QGzAYwAABW6AAA AIpwcmVwfOmklgAABLgAAAVrAAEAAAABAADhSQxgXw889QAfCAAAAAAAxrHnsAAAA data: URI ADGseew/qz+RgklBhQAAQAIAAIAAAAAAAAAAQAAB23+HQAACNP+rAAA P8pCSUAAQAAAAAAAAAAAAAAAAAAADQAAQAAADQALAADAAAAAAACABAAQAAHAAAEGg VrAAAAAAABBZgCvAAFAAAFRwTMAAD+QgVHBMwAAAJTAQICZggCAgsIAwMDBAs Referrer control CBIAAAK8QACB KAAAAAAAAAABCaXRzACAAQQB6BhT+FAGaB20B4wAAAAEAAAAAA AAC7ABEAAAAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEoC+v6sBjMAKwUZ ACsH9gArBrIAKwbNAEoF3QArBs0ASgYpACsFwwAfBXUAYgZ/AIsGMQCcCNMA2wY Cross-Origin Access Control r/5gFywCBBc3/ywVmACMFugA/BL4ATAW6AEoFbQBKA3sAZgW6ACkFsgA/Ar4APw K +/voFUgA/Ar4APwhWAD8FsgA/BX8ASgW6/+wFugBKA/IAPwTDABQD0wBYBbIAe wU3AIEHZACyBSn/rAU3AAAEqP/uAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAA HAAEADgAAAAKAAgAAgACAEQARwBaAHr//wAAAEEARgBKAGH////C/8H/ Friday, February 19, 2010
  79. 79. PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
  80. 80. PROTECTING THE FONT # disallow non-local referrers SetEnvIfNoCase Referer "^http://w+.your-domain.com[/$]" locally_linked=1 # uncomment to allow blank referrers # SetEnvIfNoCase Referer "^$" locally_linked=1 <FilesMatch ".(ttf|otf|eot|woff|font.css)$"> Order Allow,Deny Allow from env=locally_linked # allow subdomain access <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "your-domain.com" </IfModule> </FilesMatch> Friday, February 19, 2010
  81. 81. OPTIMIZATION Subset gzip EOTFast Friday, February 19, 2010
  82. 82. OPTIMIZATION Subset gzip EOTFast Friday, February 19, 2010
  83. 83. OPTIMIZATION Subset gzip EOTFast Friday, February 19, 2010
  84. 84. RENDERING Friday, February 19, 2010
  85. 85. CREDIT WHERE CREDIT IS DUE Opera: introduced the spec IE: @font-face since IE4, <ruby>, core web fonts Safari: Quartz rendering Firefox: font-size-adjust, text-rendering Friday, February 19, 2010
  86. 86. Friday, February 19, 2010
  87. 87. Friday, February 19, 2010
  88. 88. Friday, February 19, 2010
  89. 89. Friday, February 19, 2010
  90. 90. Friday, February 19, 2010
  91. 91. FOUT Your options: Deal. gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
  92. 92. FOUT Your options: Deal. The x-height The x-height gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
  93. 93. FOUT Your options: Deal. The x-height The x-height gzip Subset .title { font-size: 12px; data-uri font-size-adjust: 0.6; /* x-height: 7.2px */ }font-size-adjust Hide everything! Friday, February 19, 2010
  94. 94. FOUT Your options: Deal. gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
  95. 95. FOUT Your options: Deal. gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
  96. 96. RENDERING QUALITY Friday, February 19, 2010
  97. 97. TRICKS disable cleartype text-rendering text-shadow Friday, February 19, 2010
  98. 98. TRICKS disable cleartype text-rendering h2, p { font: 36px/44px 'OldSansBlack', sans-serif; letter-spacing: 0; text-shadow filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.p ng,sizingMethod=crop); zoom:1; } Friday, February 19, 2010
  99. 99. TRICKS disable cleartype text-rendering text-shadow Friday, February 19, 2010
  100. 100. TRICKS disable cleartype text-rendering text-shadow Friday, February 19, 2010
  101. 101. GO FORTH AND MAKE IT LOOK GOOD. Don’t go crazy on it, though. Friday, February 19, 2010
  102. 102. GO FORTH AND MAKE IT LOOK GOOD. Don’t go crazy on it, though. Friday, February 19, 2010
  103. 103. Squeeeezing the best out of webfonts Muchas thankos! More: http:/ /paulirish.com/squeeze Me: http://paulirish.com http://twitter.com/paul_irish Friday, February 19, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×