Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Employing Custom Fonts

11,571 views

Published on

Published in: Technology, Art & Photos
  • key the download file type is .key? Thanks. Any security issue to open it?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • great current state summary!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Employing Custom Fonts

  1. 1. EMPLOYING CUSTOM FONTS... NOW!!! Paul Irish Molecular Inc. Emerging Interactions & Front-end Dev
  2. 2. @FONT-FACE
  3. 3. @FONT-FACE • .eot and .ttf/.otf embedding • Available in FF 3.5, Safari 3.2, Opera 10 .... and all IE for .eot
  4. 4. @FONT-FACE • .eot and .ttf/.otf embedding • Available in FF 3.5, Safari 3.2, Opera 10 .... and all IE for .eot
  5. 5. FONT FORMAT PROPOSALS • .webfont ➡ .webOTF ➡ WOFF • All (mostly) foundries ♥ it, nearly ideal solution • Mozilla is championing it • EOT-Lite • Proposed by Ascender • EOT minus the domain binding and MTX compression • Works in IE today
  6. 6. SO THEN WHAT?
  7. 7. THE LANDSCAPE • @font-face • Rich Type Libraries • sIFR, Facelift, typeface.js, Cufón • FaaS Shops • Typekit, Fontdeck, Typotheque, Kernest
  8. 8. FONTS AS A SERVICE FaaS
  9. 9. TYPOTHEQUE • Actual foundry, their fonts and others • CSS only • Files not cached at all • Relatively small typeface roster • Pricing model unknown
  10. 10. KERNEST • CSS only • A mix of free and commercial fonts, 100 total • $0-15/font/year • No caching
  11. 11. FONTDECK • Great team behind it from Clearleft, including Richard Rutter • No code yet • No news
  12. 12. TYPEKIT • From Small Batch, Inc: Jeff Veen, etc • Include a javascript file. No fallback • They deal with licensing, you pay buffet style, 250+ fonts • All files hosted on CDN. • Cached for 5 minutes, with etags
  13. 13. TYPEKIT • From Small Batch, Inc: Jeff Veen, etc • Include a javascript file. No fallback • They deal with licensing, you pay buffet style, 250+ fonts • All files hosted on CDN. • Cached for 5 minutes, with etags
  14. 14. TYPEKIT • From Small Batch, Inc: Jeff Veen, etc • Include a javascript file. No fallback • They deal with licensing, you pay buffet style, 250+ fonts • All files hosted on CDN. • Cached for 5 minutes, with etags
  15. 15. YO, I ROLL SOLO Making your own FaaS
  16. 16. YOUR OWN FONT SERVICE 1.You get fonts 2.You verify the license permits your plans 3.You serve fonts to browsers that support @font- face 4.You protect the font data as much as possible 5.You provide a fallback for the rest of the browsers 6.You win life
  17. 17. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  18. 18. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  19. 19. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  20. 20. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  21. 21. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  22. 22. PROPRIETARY TYPEFACE • Client owns the IP • Client needs to know the risks • Brief them on alternatives and considerations
  23. 23. COMMERCIAL TYPEFACE • Read the EULA. Communicate about your protection techniques. • If client already owns it, they likely don’t own a web/embedding license • FaaS fonts are fair game. You’ll need to talk the foundry but it should be relatively easy.
  24. 24. COMMERCIAL TYPEFACE • Read the EULA. Communicate about your protection techniques. • If client already owns it, they likely don’t own a web/embedding license • FaaS fonts are fair game. You’ll need to talk the foundry but it should be relatively easy.
  25. 25. COMMERCIAL TYPEFACE • Read the EULA. Communicate about your protection techniques. • If client already owns it, they likely don’t own a web/embedding license • FaaS fonts are fair game. You’ll need to talk the foundry but it should be relatively easy.
  26. 26. 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,
  27. 27. 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;
  28. 28. 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; }; })();
  29. 29. @FONT-FACE SYNTAX
  30. 30. @FONT-FACE SYNTAX
  31. 31. @FONT-FACE SYNTAX
  32. 32. @FONT-FACE SYNTAX
  33. 33. PROTECTING THE FONT DATA • Linking to the naked font is irresponsible and most likely, also i"egal • ..er, for commercial typefaces, that is. • data: URI • ttf2eot • Sniff or IE gets double • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php • MHTML
  34. 34. PROTECTING THE FONT @font-face { font-family: "vera-sans-1"; DATA src: url(data:font/otf;base64,AAEAAAASAQAABAAgRkZUTTjXPEcAA FoUAAAAHEdERUYAJwA6AABXgAAAAB5HUE9TIN8cOQAAV9AAAAJCR1NVQrj/uP4A AFegAAAAME9TLzK1ov3BAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEBqAA • Linking to the naked font is irresponsible and most AAFZjbWFwczI52AAAAtAAAAFaY3Z0IBGE48kAAAokAAABxmZwZ23nl/HEAAAELD AAAAItnYXNwAAcABwAAV3QAAAAMZ2x5ZhcqOIkAAAxYAAAr0GhlYWT0aRi3AAAB likely, also i"egal LAAAADZoaGVhD0EGTgAAAWQAAAAkaG10eBfPCDUAAAIAAAAA0GxvY2EOCQRGAAA L7AAAAGptYXhwBGkF2QAAAYgAAAAgbmFtZYWMOCMAADgoAAAewHBvc3QGzAYwAA • ..er, for commercial typefaces, that is. BW6AAAAIpwcmVwfOmklgAABLgAAAVrAAEAAAABAADhSQxgXw889QAfCAAAAAAAx rHnsAAAAADGseew/qz+RgklBhQAAQAIAAIAAAAAAAAAAQAAB23+HQAACNP+rAAA • data: URI P8pCSUAAQAAAAAAAAAAAAAAAAAAADQAAQAAADQALAADAAAAAAACABAAQAAHAAAE GgVrAAAAAAABBZgCvAAFAAAFRwTMAAD+QgVHBMwAAAJTAQICZggCAgsIAwMDBAs • ttf2eot CBIAAAK8QACB KAAAAAAAAAABCaXRzACAAQQB6BhT+FAGaB20B4wAAAAEAAAAAA AAC7ABEAAAAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEoC+v6sBjMAKwUZ ACsH9gArBrIAKwbNAEoF3QArBs0ASgYpACsFwwAfBXUAYgZ/AIsGMQCcCNMA2wY • Sniff or IE gets double r/5gFywCBBc3/ywVmACMFugA/BL4ATAW6AEoFbQBKA3sAZgW6ACkFsgA/Ar4APw K+/voFUgA/Ar4APwhWAD8FsgA/BX8ASgW6/+wFugBKA/IAPwTDABQD0wBYBbIAe • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php wU3AIEHZACyBSn/rAU3AAAEqP/uAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAA HAAEADgAAAAKAAgAAgACAEQARwBaAHr//wAAAEEARgBKAGH////C/8H/ • MHTML
  35. 35. PROTECTING THE FONT DATA • Linking to the naked font is irresponsible and most likely, also i"egal • ..er, for commercial typefaces, that is. • data: URI • ttf2eot • Sniff or IE gets double • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php • MHTML
  36. 36. PROTECTING THE FONT DATA • Linking to the naked font is irresponsible and most likely, also i"egal • ..er, for commercial typefaces, that is. • data: URI • ttf2eot • Sniff or IE gets double • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php • MHTML
  37. 37. PROTECTING THE FONT DATA • Subset! • Segment! • Referrer control • Cross-Origin Access Control
  38. 38. PROTECTING THE FONT DATA # 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>
  39. 39. RICH TYPE LIBRARIES
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. http://bit.ly/facelift
  44. 44. http://bit.ly/facelift
  45. 45. http://bit.ly/facelift
  46. 46. 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
  47. 47. http://bit.ly/typefacejs
  48. 48. TYPEFACE.JS • Configuration • Styling type with CSS as normal • Runtime Technique: 1. Finds target elements by a 'typeface-js' class 2. Reading style properties through getComputedStyle() 3. Reads JSON representation of font and transforms into... 4. VML glyph rendering for IE, Canvas for the rest
  49. 49. http://bit.ly/cufon
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. sIFR Facelift typeface.js Cufón Technologies Javascript, Flash Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML ImageMagick Selectable text? Yes, but not the Only in Firefox. No Supported WITH Not supported yet. surrounding elements visual affordance. visual affordance Solutions for all if the selection starts browsers minus Opera inside the SWF exist. Hover state? Supported Supported In progress Supported Printable? Print.css lets you <img> prints fine. Supported. Supported. define a non-flash fallback Licensing issues Some. SWF can be None. Font file held TBD. JS file can be TBD. Cufon file can be paired with a domain. on backend and not reused with typeface.js paired with a domain. distributed on any domain. Minified javascript 28.8k 18.4k 11.7k 14.2k size Fontin Sans (basic 12k swf n/a 30k js 16k js characters) size  
  54. 54. Technologies Javascript, Flash Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML ImageMagick Selectable text? Yes, but not the Only in Firefox. No Supported WITH Not supported yet. surrounding elements visual affordance. visual affordance Solutions for all if the selection starts browsers minus Opera inside the SWF exist. Hover state? Supported Supported In progress Supported Printable? Print.css lets you <img> prints fine. Supported. Supported. define a non-flash fallback Licensing issues Some. SWF can be None. Font file held TBD. JS file can be TBD. Cufon file can be paired with a domain. on backend and not reused with typeface.js paired with a domain. distributed on any domain. Minified javascript 28.8k 18.4k 11.7k 14.2k size Fontin Sans (basic 12k swf n/a 30k js 16k js characters) size   Gentium (full set) 232k swf n/a 1334k js 400k js
  55. 55. 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
  56. 56. CONCLUSIONS • 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 • Cufón • Full of win. (as long as licensing allows)
  57. 57. OPTIMAL IMPLEMENTATION <!doctype html> <head> <!-- Modernizr would be a fine solution here as well --> <script src="isFontFaceSupported.js"></script> <!-- css will include dataURI ttf/otf data and links to the .eot --> <link rel="stylesheet" type="style/css" href="gentium.font.css"/> </head> <body> <h1>My enthralling Content</h1> ... <script> isFontFaceSupported._onready(function(supported){ !supported && getScript('cufon.and.font.js',function(){ Cufon.now(); })
  58. 58. OPTIMAL <!doctype html> <head> IMPLEMENTATION <!-- Modernizr would be a fine solution here as well --> <script src="isFontFaceSupported.js"></script> <!-- css will include dataURI ttf/otf data and links to the .eot --> <link rel="stylesheet" type="style/css" href="gentium.font.css"/> </head> <body> <h1>My enthralling Content</h1> ... <script> isFontFaceSupported._onready(function(supported){ !supported && getScript('cufon.and.font.js',function(){ Cufon.now(); }) }); </script> </body> </html>
  59. 59. CONSIDERATIONS • Performance • Rendering quality • http://kltf.de/kltf_notes_raster.htm • http://opentype.info/demo/webfontdemo.html • http://nicewebtype.com/fonts/
  60. 60. NEXT? • SVG Fonts integration for Chrome? • Online font subsetting/segmenting tool • Different files for diff languages to minimize size • Open source library for best implementation • Watch the EOT-Lite/WOFF developments
  61. 61. EMPLOYING CUSTOM FONTS... NOW! Muchas thankos! More: http://paulirish.com/customfonts Me: http://paulirish.com http://twitter.com/paul_irish

×