The document provides an overview of web fonts, including their history, formats, licensing, hosting options and best practices. It discusses the evolution from early techniques like sIFR and Cufón to the current standard of @font-face with WOFF fonts. Commercial foundries and free options are covered, along with the "bulletproof" syntax for browser compatibility. Font hosting services are presented as an easier alternative to managing files directly. The future of hinting, a single format and richer typographic tools through CSS is envisioned.

1. The Type Revolutionary’s
Cookbook
Aaron Stanush
Kevin O’Leary

2. Aaron Stanush Kevin O’Leary
Partner and Designer UX designer
aaron@fourkitchens.com kevin.o'leary@acquia.com
@aaronstanush

3. Why do we need more fonts?
Because we do

4. Because...
‣ Type is beautiful
‣ Variety adds richness
‣ Type adds meaning

6. A little bit of history
The golden age of type

7. Timeline
‣ 1975: Steve Jobs takes a calligraphy class
‣ 1984: The First Scalable Type Fonts
‣ 1991: The Unicode Standard
‣ 1995: Thousands of scalable fonts in use
‣ 1998: @font-face introduced
‣ 2007: Typekit launched
‣ 2010: All major browsers support @font-face

8. Before After
‣ sIFR ‣ @font-face + WOFF
‣ Flash ‣ Just CSS
‣ Liked by foundries ‣ Still serves files but in a more
secure way
‣ Cufón
‣ Javascript/JSON
‣ Lightweight, not widely
trusted for licensing

9. Then
‣ Arial ‣ Times
‣ Georgia ‣ Palatino
‣ Trebuchet MS ‣ Geneva
‣ Verdana ‣ Courier New
‣ Impact ‣ Comic Sans

10. lostworldsfairs.com/moon

11. FOUNDRIES DESIGNERS
&
Museo Gotham Avenir
FORMATS TTF WOFF EOT SVG
@font-face
FONT
DIY HOSTING
SERVICES

12. Where do fonts come from?
Boutiques and mega-stores

13. Commerical fonts
‣ Foundries and designers
‣ Hoefler Frere-Jones, FontFont, House Industries, EmType,
Emigre, P22
‣ Font stores
‣ FontShop.com
‣ MyFonts.com
‣ Fontspring.com

14. Web font licensing
It’s complicated. Every foundry or designer has their own rules.

15. webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview

16. Commercial-free or open source
‣ Font Squirrel
‣ fontsquirrel.com
‣ Google web fonts
‣ code.google.com/webfonts
‣ League of Movable Type
‣ theleagueofmovabletype.com

17. SIL Open font license
‣ scripts.sil.org/OFL
“
It means that you're allowed to use these fonts personally or
commercially, as long as you credit the original creator, and if
you made tweaks and changes to the typefaces, any new
typefaces resulting from it should be licensed under the
same terms. That way all our fonts and any new fonts
resulting from them will always be open.
theleagueofmoveabletype.com/manifesto

18. Web font formats
Many formats for many browsers

19. Web font formats
‣ Truetype (TTF) ‣ Web open font format
(WOFF)
‣ Standard desktop format
‣ W3C standard, soon
‣ Embedded OpenType
(EOT) ‣ Smaller, contains metadata
‣ TrueType + DRM ‣ Scalable Vector Graphics
(SVG)
‣ Created by Microsoft
‣ Not an actual font format

20. Browser support
Format Firefox 3.6+ Chrome 6+ IE 6-8 IE9 Safari 3.1+ iOS 4.2 Android 2.2
EOT • •
TTF • • • • •
SVG • •
WOFF • • •
webfonts.info/wiki/index.php?title=@font-face_browser_support

21. Do it yourself
Font kits and bulletproof @font-face syntax

22. @font-face kits
‣ Contains:
‣ EOT, WOFF, TTF, SVG
‣ Pre-built kits
‣ Paid: fontspring.com and other shops
‣ Free: fontsquirrel.com/fontface
‣ Build your own/host your own
‣ fontsquirrel.com/fontface/generator

23. Basic @font-face
@font-face {
font-family: Gotham;
src: url('gotham.ttf');
}
h1 {
font-family: Gotham;
}

24. Bulletproof @font-face
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?iefix') format('eot'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}
fontspring.com/blog/the-new-bulletproof-font-face-syntax

25. Define the first EOT
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?iefix') format('eot'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}
This ensures the EOT is delivered to IE 9 while in IE 7/8 compatibility mode.

26. Define the second EOT
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?iefix') format('eot'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}
The question mark tricks IE 6-8 into ignoring the rest of the formats.

27. Define the WOFF
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?iefix') format('eot'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}

28. Define the True-type
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?iefix') format('eot'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}

29. Define the SVG
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?iefix') format('eot'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}
If the # value was not provided for you, open the SVG file in a text editor and look for:
font id="mySVGFontName"

30. Font hosting services
An easier way

31. Font hosting
‣ Pros
‣ Large selection of high-quality fonts
‣ Very little coding
‣ No worrying about licensing
‣ No expensive font purchases
‣ Cons
‣ Not free – pay by pageviews or per font

32. Font hosting services
‣ fonts.com
‣ fontslive.com
‣ fontdeck.com
‣ typekit.com
‣ web-type.com
‣ kernest.com and fontue.com
‣ webink.com

33. Font hosting services
fffo.grahambird.co.uk

34. Ensuring quality
It’s a mixed bag

35. Three steps to quality
‣ Know your foundry
‣ Use appropriately
‣ Test, test, test

36. Getting the hint
Not all fonts are created equal

37. What the future holds

38. What we can hope for
‣ Hinting will go away (eventually)
‣ We will consolidate on one format (WOFF)
‣ All typographic tools available to print designers will
become part of CSS
‣ Optically scalable fonts

39. Optical scaling

40. @font-your-face module
‣ drupal.org/project/fontyourface
‣ Support for Typekit, Google Fonts, Fonts.com, Font Squirrel,
Kernest, and FontDeck
‣ Enabling a font happens automatically, e.g. no JS to add
‣ Can apply fonts to site elements through the UI

41. What did you think?
Locate this session on the DCC website:
http://chicago2011.drupal.org/sessions
Click the “Take the Survey” link.
Thanks!