Squeezing The Best Out Of Webfonts

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 Conﬁguration Custom js/css styling syntax Internal Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties from sifr-conﬁg.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 Conﬁguration 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 Conﬁguration 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 ﬁve 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 ﬁle 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

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+ (.woﬀ 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

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

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

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

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

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

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 Ofﬂine Web Apps CSS Transitions …and so on and so on. Friday, February 19, 2010

Feature Detection Just Detect It™ 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

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

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

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

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

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

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

Squeezing The Best Out Of Webfonts

by Paul Irish

Accessibility

Categories

Upload Details

Usage Rights

16 Embeds 4,785

Statistics

Squeezing The Best Out Of Webfonts Presentation Transcript