Slide 1
Slide 1 text
WEBFONTS
Slide 2
Slide 2 text
WEB FONTS
Slide 3
Slide 3 text
1996
★ Microsoft gives CoreFonts to the web
★ Good: Verdana, Georgia
★ OK: Times New Roman, Arial, Trebuchet,
Impact
★ Ugly: Comic Sans
Slide 4
Slide 4 text
1997
★ Browser Wars.
★ IE: EOT
★ Netscape: TrueDoc
★ Nobody cares. Everybody just uses Arial.
Slide 5
Slide 5 text
1997-2007
★ Crickets.
★ Embed type in images, use Core Fonts.
★ Foundries ostrich.
Slide 6
Slide 6 text
2004
★ sIFR - a painful but useful attempt at using
custom fonts.
Slide 7
Slide 7 text
2007
★ Håkon Wium Lie writes "CSS @ Ten" for
A List Apart.
Slide 8
Slide 8 text
2008
★ Safari 3.1 allows native @font-face
embedding of TTF/OTF font les.
Slide 9
Slide 9 text
2009
★ Firefox 3.5 supports TTF/OTF @font-face
embedding
★ People realize that IE still supports EOT.
★ FF + Safari + IE = most of the web.
Slide 10
Slide 10 text
2009
★ Chrome 4 supports @font-face
★ Cufon debuts. Great hack, too late.
★ Foundries remove head from sand, help
create WOFF
★ FF 3.6, Chrome 5, use WOFF
Slide 11
Slide 11 text
2009
★ Typekit debuts
★ Font Squirrel generator debuts
★ I launch thatwasnotok.com
Slide 12
Slide 12 text
2010
★ Bunch of Typekit clones pop up
★ Foundries roll their own
★ Serious exploration of x-platform
rendering issues
Slide 13
Slide 13 text
2011
★ IE9 released (much better type rendering)
★ Safari 5.1 nally has WOFF support
★ Typekit bought by Adobe
Slide 14
Slide 14 text
2011
@font-‐face
{
font-‐family:
'MyWebFont';
src:
url('webfont.eot');
/*
IE9
Compat
Modes
*/
src:
url('webfont.eot?#iefix')
format('embedded-‐opentype'),
/*
IE6-‐IE8
*/
url('webfont.woff')
format('woff'),
/*
Modern
Browsers
*/
url('webfont.ttf')
format('truetype'),
/*
Safari,
Android,
iOS
*/
url('webfont.svg#svgFontName')
format('svg');
/*
Legacy
iOS
*/
}
/*
http://www.fontspring.com/blog/further-‐hardening-‐of-‐the-‐bulletproof-‐syntax
*/
Slide 15
Slide 15 text
2012
?
Slide 16
Slide 16 text
Type Rendering
★ Windows & Windows & Mac, oh my
Slide 17
Slide 17 text
Type Rendering
Slide 18
Slide 18 text
Mac OS X
Slide 19
Slide 19 text
DirectWrite (Vista, Win 7)
Slide 20
Slide 20 text
GDI ClearType (XP)
Slide 21
Slide 21 text
GDI Standard (XP)
Slide 22
Slide 22 text
No Antialiasing
Slide 23
Slide 23 text
TrueType Hinting
★ Trying to make Windows suck less
Slide 24
Slide 24 text
TrueType Hinting
Slide 25
Slide 25 text
ttfautohint
Slide 26
Slide 26 text
Performance
★ All browsers handle @font-face differently
★ WebFont Loader lets you smooth them out
Slide 27
Slide 27 text
Best Practices
★ Always test font rendering in Win XP rst
Slide 28
Slide 28 text
Best Bets
★ Typekit (esp. Adobe and FontFont)
★ WebType RE fonts
★ ttfautohint
★ Running fonts through Font Squirrel
generator
★ Headlines are always safer
Slide 29
Slide 29 text
Webfonts + WordPress
★ Best plugin I found for Google Web Fonts:
http://wordpress.org/extend/plugins/
google-web-fonts-for-wordpress/
★ WordPress.com has Typekit integration
built in. ($30/year)
★ Custom is the best way to go if you can.
Slide 30
Slide 30 text
FontFriend
http://somadesign.ca/projects/fontfriend/
Slide 31
Slide 31 text
Thanks!
★ http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/
★ http://www.typotheque.com/articles/hinting
★ http://www.fontslive.com/info/typography/web-font-quality.aspx
★ http://www.lucasfonts.com/fonts/thesans/thesans-of ce/features/
★ http://cl.ly/9PBw
★ http://www.freetype.org/ttfautohint/
★ https://github.com/typekit/webfontloader