squeezing the best out of webfonts
DESCRIPTION
TRANSCRIPT
Paul IrishMolecular Inc.
Emerging Interactions & Front-end Dev
SQUEEZING THE BEST OUT OF WEBFONTS
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
ConfigurationCustom js/css styling syntax
Internal Technique1. Custom selector engine (or querySelectorAll) 2. Reading style properties from sifr-config.js3. Placing Flash SWFs
Friday, February 19, 2010
http://bit.ly/typefacejs Friday, February 19, 2010
CUFÓN
ConfigurationStyling type with CSS as normal
Runtime Technique1. 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
ConfigurationStyling type with CSS as normal
Runtime Technique1. 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
ConfigurationStyling type with CSS as normal
Runtime Technique1. 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/faceliftFriday, February 19, 2010
FACELIFT
ConfigurationStyling type with CSS as normal
Runtime Technique1. Custom selector engine (or querySelectorAll) 2. Reading style properties through
getComputedStyle() 3. Calling generate.php with text and style
Friday, February 19, 2010
FACELIFT
ConfigurationStyling type with CSS as normal
Runtime Technique1. Custom selector engine (or querySelectorAll) 2. Reading style properties through
getComputedStyle() 3. Calling generate.php with text and style
Friday, February 19, 2010
FACELIFT
ConfigurationStyling type with CSS as normal
Runtime Technique1. 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 surrounding elements if the selection starts inside the SWF
Supported WITH visual affordance
Not supported yet. Solutions for all browsers minus Opera exist.
Only in Firefox. No visual affordance.
Hover state? Supported In progress Supported Supported
Printable? Print.css lets you define a non-flash fallback
Supported. Supported. <img> prints fine.
Licensing issues Some. SWF can be paired with a domain.
TBD. JS file can be reused with typeface.js on any domain.
TBD. Cufon file can be paired with a domain.
None. Font file held on backend and not distributed
Minified javascript size
28.8k 11.7k 14.2k 18.4k
Fontin Sans (basic characters) size
12k swf 30k js 16k js n/a
Gentium (full set) 232k swf 1334k js 400k js n/a
Friday, February 19, 2010
0 ms
7,500 ms
15,000 ms
22,500 ms
30,000 ms
sIFR Facelift Cufón typeface.js
Firefox 3 IE 7 IE 6
Milliseconds to replace 120 elements on a popular homepage PERFORMANCE
Empty cache. Average of five runs.
Friday, February 19, 2010
THE JS SOLUTION CONCLUSION
sIFRThx for the good times. xoxo.
FaceliftFont file protected, safe with licensing rulesRequires PHP and HTTP requests
Typeface.jsQuality and performance inferior to Cufon. (‘cept for selection)
CufónFull 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(eot or ttf/otf)
svg fonts(uses @font-face)
rich type libraries(sIFR, Cufon, etc)
IE
Firefox
Safari
Chrome
Opera
IE 5+ IE 6+
FF 3.5(.woff in 3.6)
FF 3.5 + FF 2+
3.1+ 3.1+(incl. mobile safari)
3+
Chrome 4.0 (stable)
Chrome 0.3 + 1+
Opera 10 Opera 9 9.2+(sometimes)
Friday, February 19, 2010
BROWSER SUPPORT
@font-face(eot or ttf/otf)
svg fonts(uses @font-face)
rich type libraries(sIFR, Cufon, etc)
IE
Firefox
Safari
Chrome
Opera
IE 5+ IE 6+
FF 3.5(.woff in 3.6)
FF 3.5 + FF 2+
3.1+ 3.1+(incl. mobile safari)
3+
Chrome 4.0 (stable)
Chrome 0.3 + 1+
Opera 10 Opera 9 9.2+(sometimes)
Friday, February 19, 2010
IE 7.019%
IE 6.012%
IE 8.023%
Firefox 3.05%
Firefox 3.521%Safari 4.0
4%
Saf3, Opera, Chrome16%
95% SUPPORT OF @FONT-FACE
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 ➞ WOFFAll foundries <3 itMozilla is championing it. It’s in 3.6
EOT-Lite ➞ CWTProposed by AscenderEOT minus the domain binding and MTX compressionWorks in IE today
Friday, February 19, 2010
WEBFONT SERVICES
Friday, February 19, 2010
WEBFONT OBFUSCATION
..also cdn optimization goodness..
SERVICES
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 SOLOGoin 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;
// 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) 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
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;
// 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) 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
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;
// 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) 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
ModernizrMaking use of tomorrow’s technologies, today!
Friday, February 19, 2010
HTML5 & CSS3 Coolness™
Friday, February 19, 2010
Rounded corners @font-face fontsCanvasrgba() colorsborder-imagebox-shadowHTML5 Audio & VideoCSS AnimationsCSS Transitions
2D TransformationsCSS GradientsSVGGeolocationCSS ColumnsLocalStorageWeb WorkersOffline Web Apps…and so on and so on.
HTML5 & CSS3 Coolness™
Friday, February 19, 2010
Friday, February 19, 2010
Feature DetectionJust Detect It™
Friday, February 19, 2010
Friday, February 19, 2010
Native Implementationh1 {
// use cool custom font!// it’ll rock!
}
No Native Implementation
.no-fontface h1 {// far less awesome font
}
if (Modernizr.fontface == false){// Cufon fallback
}
Friday, February 19, 2010
Friday, February 19, 2010
OMG it’s only 7k!
Friday, February 19, 2010
BACK TO FONTS...
Friday, February 19, 2010
PROTECTING THE FONT
Subset!data: URI Referrer controlCross-Origin Access Control
Friday, February 19, 2010
PROTECTING THE FONT
Subset!data: URI Referrer controlCross-Origin Access Control
Friday, February 19, 2010
PROTECTING THE FONT
Subset!data: URI Referrer controlCross-Origin Access Control
Friday, February 19, 2010
PROTECTING THE FONT
Subset!data: URI Referrer controlCross-Origin Access Control
@font-face { font-family: "vera-sans-1"; src: url(data:font/otf;base64,AAEAAAASAQAABAAgRkZUTTjXPEcAA FoUAAAAHEdERUYAJwA6AABXgAAAAB5HUE9TIN8cOQAAV9AAAAJCR1NVQrj/uP4A AFegAAAAME9TLzK1ov3BAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEBqAAAAFZjbWFwczI52AAAAtAAAAFaY3Z0IBGE48kAAAokAAABxmZwZ23nl/HEAAAELD AAAAItnYXNwAAcABwAAV3QAAAAMZ2x5ZhcqOIkAAAxYAAAr0GhlYWT0aRi3AAABLAAAADZoaGVhD0EGTgAAAWQAAAAkaG10eBfPCDUAAAIAAAAA0GxvY2EOCQRGAAAL7AAAAGptYXhwBGkF2QAAAYgAAAAgbmFtZYWMOCMAADgoAAAewHBvc3QGzAYwAABW6AAAAIpwcmVwfOmklgAABLgAAAVrAAEAAAABAADhSQxgXw889QAfCAAAAAAAxrHnsAAAAADGseew/qz+RgklBhQAAQAIAAIAAAAAAAAAAQAAB23+HQAACNP+rAAA P8pCSUAAQAAAAAAAAAAAAAAAAAAADQAAQAAADQALAADAAAAAAACABAAQAAHAAAEGgVrAAAAAAABBZgCvAAFAAAFRwTMAAD+QgVHBMwAAAJTAQICZggCAgsIAwMDBAs CBIAAAK8QACB KAAAAAAAAAABCaXRzACAAQQB6BhT+FAGaB20B4wAAAAEAAAAAA AAC7ABEAAAAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEoC+v6sBjMAKwUZ ACsH9gArBrIAKwbNAEoF3QArBs0ASgYpACsFwwAfBXUAYgZ/AIsGMQCcCNMA2wY 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 controlCross-Origin Access Control
Friday, February 19, 2010
PROTECTING THE FONT
# disallow non-local referrersSetEnvIfNoCase 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.gzipSubsetdata-urifont-size-adjustHide everything!
Friday, February 19, 2010
FOUT
Your options:Deal.gzipSubsetdata-urifont-size-adjustHide everything!
The x-height The x-height
Friday, February 19, 2010
FOUT
Your options:Deal.gzipSubsetdata-urifont-size-adjustHide everything!
The x-height The x-height
.title { font-size: 12px; font-size-adjust: 0.6; /* x-height: 7.2px */}
Friday, February 19, 2010
FOUT
Your options:Deal.gzipSubsetdata-urifont-size-adjustHide everything!
Friday, February 19, 2010
FOUT
Your options:Deal.gzipSubsetdata-urifont-size-adjustHide 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
text-shadowh2, p {font: 36px/44px 'OldSansBlack', sans-serif; letter-spacing: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,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