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



SIFR

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

http://bit.ly/typefacejs

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

http://bit.ly/cufon

http://bit.ly/cufon

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





CUFÓN





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

http://facelift.mawhorter.net/

http://facelift.mawhorter.net/

FACELIFT


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

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


FACELIFT





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


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.


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


@FONT-FACE


@FONT-FACE


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)


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)


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


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







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


@FONT-FACE SYNTAX


FONT SQUIRREL GENERATOR


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


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.





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



PROTECTING THE FONT



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



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

gzip

EOTFast


OPTIMIZATION

Subset

gzip

EOTFast


OPTIMIZATION

Subset

gzip

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







FOUT

Your options:Deal.gzipSubsetdata-urifont-size-adjustHide everything!


FOUT


The x-height The x-height


FOUT


The x-height The x-height

.title { font-size: 12px; font-size-adjust: 0.6; /* x-height: 7.2px */}


FOUT



FOUT



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


http://paulirish.com/type

http://paulirish.com/type

http://paulirish.com

http://paulirish.com

http://twitter.com/paul_irish

http://twitter.com/paul_irish

Design

Squeezing The Best Out Of Webfonts