Squeezing The Best Out Of Webfonts

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

JAVASCRIPT-BASED FONT SOLUTIONS

ConfigurationCustom js/css styling syntax

Internal Technique1. Custom selector engine (or querySelectorAll) 2. Reading style properties from sifr-config.js3. Placing Flash SWFs

http://bit.ly/typefacejs Friday, February 19, 2010

http://bit.ly/cufon 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

CUFÓN

http://bit.ly/faceliftFriday, February 19, 2010

FACELIFT

Runtime Technique1. Custom selector engine (or querySelectorAll) 2. Reading style properties through

getComputedStyle() 3. Calling generate.php with text and style

FACELIFT

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

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.

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.

@FONT-FACE

BROWSER SUPPORT

@font-face(eot or ttf/otf)

svg fonts(uses @font-face)

rich type libraries(sIFR, Cufon, etc)

Firefox

Safari

Chrome

IE 5+ IE 6+

FF 3.5(.woff in 3.6)

FF 3.5 + FF 2+

3.1+ 3.1+(incl. mobile safari)

Chrome 4.0 (stable)

Chrome 0.3 + 1+

Opera 10 Opera 9 9.2+(sometimes)

BROWSER SUPPORT

@font-face(eot or ttf/otf)

svg fonts(uses @font-face)

rich type libraries(sIFR, Cufon, etc)

Firefox

Safari

Chrome

IE 5+ IE 6+

FF 3.5(.woff in 3.6)

FF 3.5 + FF 2+

3.1+ 3.1+(incl. mobile safari)

Chrome 4.0 (stable)

Chrome 0.3 + 1+

Opera 10 Opera 9 9.2+(sometimes)

IE 7.019%

IE 6.012%

IE 8.023%

Firefox 3.05%

Firefox 3.521%Safari 4.0

Saf3, Opera, Chrome16%

95% SUPPORT OF @FONT-FACE

LICENSING

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

WEBFONT SERVICES

WEBFONT OBFUSCATION

..also cdn optimization goodness..

SERVICES

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

TYPEKIT

TYPOTHEQUE

Actual foundry, their fonts and others

Files cached for 5 minutes

Relatively small typeface roster

Free - $, per font or for typeface family

TYPOTHEQUE

Actual foundry, their fonts and others

Files cached for 5 minutes

Relatively small typeface roster

Free - $, per font or for typeface family

KERNEST

A mix of free and commercial fonts, 100+

$0-15/font/year

CSS only

No caching

KERNEST

A mix of free and commercial fonts, 100+

$0-15/font/year

CSS only

No caching

FONTDECK

Not launched yet

Great team behind it from Clearleft, including Richard Rutter & Jon Tan

FONTDECK

Not launched yet

Great team behind it from Clearleft, including Richard Rutter & Jon Tan

YO, I ROLL SOLOGoin it alone

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

@FONT-FACE SYNTAX

FONT SQUIRREL GENERATOR

ACQUIRING FONTS

Free fonts

Fontsquirrel, League of Movable Type, WebFonts.info wiki

Proprietary fonts

Custom-designed typefaces for your client

Commercial fonts

ACQUIRING FONTS

Free fonts

Proprietary fonts

Commercial fonts

ACQUIRING FONTS

Free fonts

Proprietary fonts

Commercial fonts

ACQUIRING FONTS

Free fonts

Proprietary fonts

Commercial fonts

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

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.

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.

FONTSPRING

PICKING THE RIGHT FONT

Step One: Test it.

Step Two: Test it More

Target Combos:FF/Win, IE6&7/Win, Saf on OSX

Step One: Test it.

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; };})();

FEATURE DETECTION

/*! isFontFaceSupported() * @font-face detection v1.0 * Paul Irish - 9/9/09 * MIT License */

FEATURE DETECTION

/*! isFontFaceSupported() * @font-face detection v1.0 * Paul Irish - 9/9/09 * MIT License */

ModernizrMaking use of tomorrow’s technologies, today!

HTML5 & CSS3 Coolness™

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™

Feature DetectionJust Detect It™

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

OMG it’s only 7k!

BACK TO FONTS...

PROTECTING THE FONT

Subset!data: URI Referrer controlCross-Origin Access Control

PROTECTING THE FONT

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

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>

OPTIMIZATION

Subset

EOTFast

OPTIMIZATION

Subset

EOTFast

OPTIMIZATION

Subset

EOTFast

RENDERING

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

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 */}

RENDERING QUALITY

TRICKS

disable cleartype

text-rendering

text-shadow

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

TRICKS

disable cleartype

text-rendering

text-shadow

TRICKS

disable cleartype

text-rendering

text-shadow

GO FORTH AND MAKE IT LOOK GOOD.

Don’t go crazy on it, though.

GO FORTH AND MAKE IT LOOK GOOD.

Don’t go crazy on it, though.

Squeeeezing the best out of webfonts

Muchas thankos!

More:http://paulirish.com/squeeze

Me:http://paulirish.com http://twitter.com/paul_irish

Squeezing The Best Out Of Webfonts

Design

Transcript of Squeezing The Best Out Of Webfonts

INDUSTRY INSIGHTS SQUEEZING - WORKTECH Academy

Squeezing out a better Stamping

Squeezing the Orange - Henry Blofeld - extract

Manual 65 Modern Webfonts - SoftMaker: Official · webfonts. Hint: If you use your own CSS file for your stylesheets anyway, you can al- ... plain HTML formatting described above,

Grasping without Squeezing: Shear Adhesion Gripper …bdml.stanford.edu/uploads/Main/Adhesion... · Grasping without Squeezing: Shear Adhesion Gripper with ... Abstract—Nearly all

Squeezing Performance out of Hazelcast

Quantum spin squeezing

Squeezing the CMB - University of Chicagobackground.uchicago.edu/~whu/Courses/Ast448_12/zablocki.pdf · Squeezing the CMB Astro448 Final Presentation -Alan Zablocki . Outline ! Introduce

Squeezing Every Last Dollar

Stefan Hild ASR Group meting, November 2008 Squeezing the best astrophysics out of Advanced Virgo Squeezing the best astrophysics out of Advanced Virgo.

Squeezing Deep Learning Into Mobile Phones

Leakage Squeezing using Cellular Automata€¦ · Leakage Squeezing using Cellular Automata SandipKarmakarand DipanwitaRoy Chowdhury, Indian Insituteof Technology, Kharagpur, WB,

MTV 13: Squeezing Little Models

Faster, and (Coincidentally) More Secure Webfonts

Squeezing the Show

Spin Squeezing, Macrorealism and the Heisenberg ...

Squeezing the proton

Squeezing secrets from the trees - uaf.edu

Proceedings Squeezing Salts

Dissipative optomechanical squeezing of light€¦ · Macroscopic quantum mechanics: theory and experimental concepts of optomechanics Yanbei Chen Squeezing quadrature rotation in