3. @FONT-FACE
• .eot and .ttf/.otf embedding
• Available in FF 3.5, Safari 3.2, Opera 10 ....
and all IE for .eot
4. @FONT-FACE
• .eot and .ttf/.otf embedding
• Available in FF 3.5, Safari 3.2, Opera 10 ....
and all IE for .eot
5.
6. FONT FORMAT
PROPOSALS
• .webfont ➡ .webOTF ➡ WOFF
• All (mostly) foundries ♥ it, nearly ideal solution
• Mozilla is championing it
• EOT-Lite
• Proposed by Ascender
• EOT minus the domain binding and MTX
compression
• Works in IE today
10. TYPOTHEQUE
• Actual foundry, their fonts and others
• CSS only
• Files not cached at all
• Relatively small typeface roster
• Pricing model unknown
11. KERNEST
• CSS only
• A mix of free and commercial fonts,
100 total
• $0-15/font/year
• No caching
12. FONTDECK
• Great team behind it from Clearleft,
including Richard Rutter
• No code yet
• No news
13. TYPEKIT
• From Small Batch, Inc: Jeff Veen, etc
• Include a javascript file. No fallback
• They deal with licensing, you pay buffet style, 250+
fonts
• All files hosted on CDN.
• Cached for 5 minutes, with etags
14. TYPEKIT
• From Small Batch, Inc: Jeff Veen, etc
• Include a javascript file. No fallback
• They deal with licensing, you pay buffet style, 250+
fonts
• All files hosted on CDN.
• Cached for 5 minutes, with etags
15. TYPEKIT
• From Small Batch, Inc: Jeff Veen, etc
• Include a javascript file. No fallback
• They deal with licensing, you pay buffet style, 250+
fonts
• All files hosted on CDN.
• Cached for 5 minutes, with etags
17. YOUR OWN FONT
SERVICE
1.You get fonts
2.You verify the license permits your plans
3.You serve fonts to browsers that support @font-
face
4.You protect the font data as much as possible
5.You provide a fallback for the rest of the
browsers
6.You win life
18. ACQUIRING FONTS
• Free fonts
• Fontsquirrel, League of Movable Type,
WebFonts.info wiki
• Proprietary fonts
• Custom-designed typefaces for your client
• Commercial fonts
19. ACQUIRING FONTS
• Free fonts
• Fontsquirrel, League of Movable Type,
WebFonts.info wiki
• Proprietary fonts
• Custom-designed typefaces for your client
• Commercial fonts
20. ACQUIRING FONTS
• Free fonts
• Fontsquirrel, League of Movable Type,
WebFonts.info wiki
• Proprietary fonts
• Custom-designed typefaces for your client
• Commercial fonts
21. ACQUIRING FONTS
• Free fonts
• Fontsquirrel, League of Movable Type,
WebFonts.info wiki
• Proprietary fonts
• Custom-designed typefaces for your client
• Commercial fonts
22. ACQUIRING FONTS
• Free fonts
• Fontsquirrel, League of Movable Type,
WebFonts.info wiki
• Proprietary fonts
• Custom-designed typefaces for your client
• Commercial fonts
23. PROPRIETARY TYPEFACE
• Client owns the IP
• Client needs to know the risks
• Brief them on alternatives and
considerations
24. COMMERCIAL TYPEFACE
• Read the EULA. Communicate about your
protection techniques.
• If client already owns it, they likely don’t
own a web/embedding license
• FaaS fonts are fair game. You’ll need to talk
the foundry but it should be relatively easy.
25. COMMERCIAL TYPEFACE
• Read the EULA. Communicate about your
protection techniques.
• If client already owns it, they likely don’t
own a web/embedding license
• FaaS fonts are fair game. You’ll need to talk
the foundry but it should be relatively easy.
26. COMMERCIAL TYPEFACE
• Read the EULA. Communicate about your
protection techniques.
• If client already owns it, they likely don’t
own a web/embedding license
• FaaS fonts are fair game. You’ll need to talk
the foundry but it should be relatively easy.
27. 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,
28. 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;
34. PROTECTING THE FONT
DATA
• Linking to the naked font is irresponsible and most
likely, also i"egal
• ..er, for commercial typefaces, that is.
• data: URI
• ttf2eot
• Sniff or IE gets double
• http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php
• MHTML
35. PROTECTING THE FONT
@font-face {
font-family: "vera-sans-1";
DATA
src: url(data:font/otf;base64,AAEAAAASAQAABAAgRkZUTTjXPEcAA
FoUAAAAHEdERUYAJwA6AABXgAAAAB5HUE9TIN8cOQAAV9AAAAJCR1NVQrj/uP4A
AFegAAAAME9TLzK1ov3BAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEBqAA
• Linking to the naked font is irresponsible and most
AAFZjbWFwczI52AAAAtAAAAFaY3Z0IBGE48kAAAokAAABxmZwZ23nl/HEAAAELD
AAAAItnYXNwAAcABwAAV3QAAAAMZ2x5ZhcqOIkAAAxYAAAr0GhlYWT0aRi3AAAB
likely, also i"egal
LAAAADZoaGVhD0EGTgAAAWQAAAAkaG10eBfPCDUAAAIAAAAA0GxvY2EOCQRGAAA
L7AAAAGptYXhwBGkF2QAAAYgAAAAgbmFtZYWMOCMAADgoAAAewHBvc3QGzAYwAA
• ..er, for commercial typefaces, that is.
BW6AAAAIpwcmVwfOmklgAABLgAAAVrAAEAAAABAADhSQxgXw889QAfCAAAAAAAx
rHnsAAAAADGseew/qz+RgklBhQAAQAIAAIAAAAAAAAAAQAAB23+HQAACNP+rAAA
• data: URI
P8pCSUAAQAAAAAAAAAAAAAAAAAAADQAAQAAADQALAADAAAAAAACABAAQAAHAAAE
GgVrAAAAAAABBZgCvAAFAAAFRwTMAAD+QgVHBMwAAAJTAQICZggCAgsIAwMDBAs
• ttf2eot
CBIAAAK8QACB KAAAAAAAAAABCaXRzACAAQQB6BhT+FAGaB20B4wAAAAEAAAAAA
AAC7ABEAAAAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEoC+v6sBjMAKwUZ
ACsH9gArBrIAKwbNAEoF3QArBs0ASgYpACsFwwAfBXUAYgZ/AIsGMQCcCNMA2wY
• Sniff or IE gets double
r/5gFywCBBc3/ywVmACMFugA/BL4ATAW6AEoFbQBKA3sAZgW6ACkFsgA/Ar4APw
K+/voFUgA/Ar4APwhWAD8FsgA/BX8ASgW6/+wFugBKA/IAPwTDABQD0wBYBbIAe
• http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php
wU3AIEHZACyBSn/rAU3AAAEqP/uAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAA
HAAEADgAAAAKAAgAAgACAEQARwBaAHr//wAAAEEARgBKAGH////C/8H/
• MHTML
36. PROTECTING THE FONT
DATA
• Linking to the naked font is irresponsible and most
likely, also i"egal
• ..er, for commercial typefaces, that is.
• data: URI
• ttf2eot
• Sniff or IE gets double
• http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php
• MHTML
37. PROTECTING THE FONT
DATA
• Linking to the naked font is irresponsible and most
likely, also i"egal
• ..er, for commercial typefaces, that is.
• data: URI
• ttf2eot
• Sniff or IE gets double
• http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php
• MHTML
38. PROTECTING THE FONT
DATA
• Subset!
• Segment!
• Referrer control
• Cross-Origin Access Control
39. PROTECTING THE FONT
DATA
# 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>
48. 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
50. TYPEFACE.JS
• Configuration
• Styling type with CSS as normal
• Runtime Technique:
1. Finds target elements by a 'typeface-js' class
2. Reading style properties through getComputedStyle()
3. Reads JSON representation of font and transforms
into...
4. VML glyph rendering for IE, Canvas for the rest
52. 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
53. 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
54. 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
55. sIFR Facelift typeface.js Cufón
Technologies Javascript, Flash Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML
ImageMagick
Selectable text? Yes, but not the Only in Firefox. No Supported WITH Not supported yet.
surrounding elements visual affordance. visual affordance Solutions for all
if the selection starts browsers minus Opera
inside the SWF exist.
Hover state? Supported Supported In progress Supported
Printable? Print.css lets you <img> prints fine. Supported. Supported.
define a non-flash
fallback
Licensing issues Some. SWF can be None. Font file held TBD. JS file can be TBD. Cufon file can be
paired with a domain. on backend and not reused with typeface.js paired with a domain.
distributed on any domain.
Minified javascript 28.8k 18.4k 11.7k 14.2k
size
Fontin Sans (basic 12k swf n/a 30k js 16k js
characters) size
56. Technologies Javascript, Flash Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML
ImageMagick
Selectable text? Yes, but not the Only in Firefox. No Supported WITH Not supported yet.
surrounding elements visual affordance. visual affordance Solutions for all
if the selection starts browsers minus Opera
inside the SWF exist.
Hover state? Supported Supported In progress Supported
Printable? Print.css lets you <img> prints fine. Supported. Supported.
define a non-flash
fallback
Licensing issues Some. SWF can be None. Font file held TBD. JS file can be TBD. Cufon file can be
paired with a domain. on backend and not reused with typeface.js paired with a domain.
distributed on any domain.
Minified javascript 28.8k 18.4k 11.7k 14.2k
size
Fontin Sans (basic 12k swf n/a 30k js 16k js
characters) size
Gentium (full set) 232k swf n/a 1334k js 400k js
57. 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
58. CONCLUSIONS
• 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
• Cufón
• Full of win. (as long as licensing allows)
59. OPTIMAL
IMPLEMENTATION
<!doctype html>
<head>
<!-- Modernizr would be a fine solution here as well -->
<script src="isFontFaceSupported.js"></script>
<!-- css will include dataURI ttf/otf data and links to the .eot -->
<link rel="stylesheet" type="style/css" href="gentium.font.css"/>
</head>
<body>
<h1>My enthralling Content</h1>
...
<script>
isFontFaceSupported._onready(function(supported){
!supported && getScript('cufon.and.font.js',function(){
Cufon.now();
})
60. OPTIMAL
<!doctype html>
<head>
IMPLEMENTATION
<!-- Modernizr would be a fine solution here as well -->
<script src="isFontFaceSupported.js"></script>
<!-- css will include dataURI ttf/otf data and links to the .eot -->
<link rel="stylesheet" type="style/css" href="gentium.font.css"/>
</head>
<body>
<h1>My enthralling Content</h1>
...
<script>
isFontFaceSupported._onready(function(supported){
!supported && getScript('cufon.and.font.js',function(){
Cufon.now();
})
});
</script>
</body>
</html>
62. NEXT?
• SVG Fonts integration for Chrome?
• Online font subsetting/segmenting tool
• Different files for diff languages to minimize size
• Open source library for best implementation
• Watch the EOT-Lite/WOFF developments
considerations like.... umm sifr sucks
&#x201C;If you do it right, you should...&#x201D; ?
jquery sifr plugin makes this wayyyyyyyy better
Doesn&#x2019;t instantiate until visible in non-IE.
Difficult configuration.
Aided by jQuery siFR plugin and others
Requires flash
Not great with foreign/special characters
Slow selector engine
No superscript
Non-html links (no open in new tab)
jquery sifr plugin makes this wayyyyyyyy better
Doesn&#x2019;t instantiate until visible in non-IE.
Difficult configuration.
Aided by jQuery siFR plugin and others
Requires flash
Not great with foreign/special characters
Slow selector engine
No superscript
Non-html links (no open in new tab)
Great tutorials:
* http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
* http://www.divitodesign.com/2008/10/install-flir-typography-solution-for-the-web/
Good response recently
http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/ &#xA0;
Good response recently
http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/ &#xA0;
Good response recently
http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/ &#xA0;
fontfont eula.. the elephant in the room.
looking for contributors
Licensing can be from 150&#x20AC; to $1500 for web embedding