Employing Custom Fonts

11,203 views

Published on

Published in: Technology, Art & Photos
2 Comments
9 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
11,203
On SlideShare
0
From Embeds
0
Number of Embeds
6,262
Actions
Shares
0
Downloads
106
Comments
2
Likes
9
Embeds 0
No embeds

No notes for slide
  • naked is scarrrry
  • test build of firefox with support for both
    not landed in trunk yet
  • Agenda:
    - Library overviews, and helpful resources
    - Comparison table
    - Licensing
    - Performance
    - Conclusions
  • 8 typefaces with variants
  • considerations like.... umm sifr sucks
    “If you do it right, you should...” ?
  • jquery sifr plugin makes this wayyyyyyyy better
    Doesn’t instantiate until visible in non-IE.
    Difficult configuration.
    Aided by jQuery siFR plugin and others
    Requires flash
    Not great with foreign/special characters
    Slow selector engine
    No superscript
    Non-html links (no open in new tab)
  • jquery sifr plugin makes this wayyyyyyyy better
    Doesn’t instantiate until visible in non-IE.
    Difficult configuration.
    Aided by jQuery siFR plugin and others
    Requires flash
    Not great with foreign/special characters
    Slow selector engine
    No superscript
    Non-html links (no open in new tab)
  • Great tutorials:
    * http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
    * http://www.divitodesign.com/2008/10/install-flir-typography-solution-for-the-web/
  • Good response recently
    http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
    http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/  
  • Good response recently
    http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
    http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/  
  • Good response recently
    http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
    http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/  
  • fontfont eula.. the elephant in the room.
  • looking for contributors
  • Licensing can be from 150€ to $1500 for web embedding
  • i still have a bit more coming.
  • 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

    ×