Squeezing The Best Out Of Webfonts
Upcoming SlideShare
Loading in...5
×
 

Squeezing The Best Out Of Webfonts

on

  • 11,394 views

 

Statistics

Views

Total Views
11,394
Views on SlideShare
6,006
Embed Views
5,388

Actions

Likes
22
Downloads
128
Comments
4

16 Embeds 5,388

http://paulirish.com 3963
http://localhost 794
http://www.paulirish.com 536
http://www.slideshare.net 29
http://dfi-hh.blogspot.com 20
http://blogs.virtual-identity.net 15
http://dfi-hh.blogspot.de 10
http://ipaintcode.com 7
http://serrilha.com 4
https://elov.vvkso.be 3
http://webcache.googleusercontent.com 2
http://hoard.heroku.com 1
http://dfi-hh.blogspot.co.at 1
http://127.0.0.1 1
http://static.slidesharecdn.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Squeezing The Best Out Of Webfonts Squeezing The Best Out Of Webfonts Presentation Transcript

    • SQUEEZING THE BEST OUT OF WEBFONTS Paul Irish Molecular Inc. Emerging Interactions & Front-end Dev Friday, February 19, 2010
    • WHAT’S THE PLAN, SAM javascript solutions @font-face overview webfont services doing @font-face the right way licensing Friday, February 19, 2010
    • JAVASCRIPT-BASED FONT SOLUTIONS Friday, February 19, 2010
    • Friday, February 19, 2010
    • 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
    • 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 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
    • 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
    • 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
    • http://bit.ly/facelift Friday, February 19, 2010
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • @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 (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
    • 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
    • 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
    • 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 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
    • WEBFONT SERVICES Friday, February 19, 2010
    • WEBFONT OBFUSCATION SERVICES ..also cdn optimization goodness.. Friday, February 19, 2010
    • 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
    • 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
    • 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
    • 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
    • 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
    • KERNEST A mix of free and commercial fonts, 100+ $0-15/font/year CSS only No caching Friday, February 19, 2010
    • KERNEST A mix of free and commercial fonts, 100+ $0-15/font/year CSS only No caching Friday, February 19, 2010
    • FONTDECK Not launched yet Great team behind it from Clearleft, including Richard Rutter & Jon Tan Friday, February 19, 2010
    • FONTDECK Not launched yet Great team behind it from Clearleft, including Richard Rutter & Jon Tan Friday, February 19, 2010
    • 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 browsers. 4.You protect the font data as much as possible 5.You win life Friday, February 19, 2010
    • @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.info wiki Proprietary fonts Custom-designed typefaces for your client Commercial fonts Friday, February 19, 2010
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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: FF/Win, IE6&7/Win, Saf on OSX Friday, February 19, 2010
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 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
    • Friday, February 19, 2010
    • Feature Detection Just Detect It™ Friday, February 19, 2010
    • Friday, February 19, 2010
    • 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
    • Friday, February 19, 2010
    • OM G it onl ’s y7 k! Friday, February 19, 2010
    • BACK TO FONTS... Friday, February 19, 2010
    • PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
    • PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
    • PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
    • 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
    • PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
    • 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
    • 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 web fonts Safari: Quartz rendering Firefox: font-size-adjust, text-rendering Friday, February 19, 2010
    • 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 font-size-adjust Hide everything! Friday, February 19, 2010
    • FOUT Your options: Deal. The x-height The x-height gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
    • 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
    • FOUT Your options: Deal. gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
    • FOUT Your options: Deal. gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
    • 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', sans-serif; letter-spacing: 0; text-shadow filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.p ng,sizingMethod=crop); zoom:1; } Friday, February 19, 2010
    • 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, February 19, 2010
    • GO FORTH AND MAKE IT LOOK GOOD. Don’t go crazy on it, though. Friday, February 19, 2010
    • 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