In the beginning, web designers only had a handful of typefaces at their disposal to use in their designs. Then Flash and Javascript allowed unlimited fonts but lacked accessibility features. In the past year, it seems we finally have a winning solution: the @font-face method which has support from all major browsers and does so using only HTML and CSS. Meanwhile, a second conversation is happening amongst those who actually own the fonts – the foundries. Would these emerging technologies ensure that their typefaces could not be easily copied from the web? Unfortunately @font-face is still not widely accepted by most foundries. Some allow you to use a hosted service like TypeKit, or you can venture into the burgeoning movement of open source and commercial-free fonts and enjoy free rein over your web typography.

1. The state of web
typography
Designing in the @font-face of danger
February 5, 2011
Aaron Stanush
Co-founder and designer

2. A little bit of history
Mmm... @font-face since ’97

3. Web font formats
‣ Embedded OpenType (EOT) ‣ SVG
‣ TrueType + DRM ‣ Not a font format
‣ Created by Microsoft ‣ Used for iOS
‣ TrueType (TTF) ‣ Web Open Font Format
(WOFF)
‣ Standard desktop format
‣ W3C standard
‣ OpenType (OTF)
‣ Small, contains
‣ TrueType 2.0 ownership data

4. It only took a decade
‣ 1997: CSS2 introduces @font-face
‣ IE4 supports @font-face but only EOT
‣ 2008: Safari 3.1 supports @font-face
‣ 2009: Firefox 3.5 supports @font-face
‣ 2010: Chrome 4 supports @font-face
‣ Firefox 3.6, Chrome 6, IE9 support WOFF
‣ W3C publishes working draft for WOFF

5. Before
‣ sIFR
‣ Flash
‣ Liked by foundries
‣ Cufón
‣ Javascript/JSON
‣ Lightweight, not widely trusted for licensing

6. Now: Just CSS
@font-face {
font-family: Gotham;
src: url('gotham.ttf');
}

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

8. Now
lostworldsfairs.com/moon

9. Getting the fonts

10. Commerical, licensed
‣ Foundries
‣ Hoefler Frere Jones, FontFont, House Industries,
EmType, etc.
‣ Font stores
‣ FontShop.com
‣ MyFonts.com

11. Web font licensing
It’s complicated. Every foundry has their own rules.
webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview

12. Free and open source
‣ Font Squirrel
‣ fontsquirrel.com
‣ Google Web Fonts
‣ code.google.com/webfonts
‣ League of Movable Type
‣ theleagueofmovabletype.com

13. SIL Open font license
‣ http://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

14. Browser support
Because one font format
would be too easy

15. Web font formats
‣ Embedded OpenType (EOT) ‣ SVG
‣ TrueType + DRM ‣ Not a font format
‣ Created by Microsoft ‣ Used for iOS
‣ TrueType (TTF) ‣ Web Open Font Format
(WOFF)
‣ Standard desktop format
‣ W3C standard
‣ OpenType (OTF)
‣ Small, contains
‣ TrueType 2.0 ownership data

16. Browser support
Firefox 3.6+ Chrome 6+ IE9 Safari 5 iOS 4.2
EOT
•
TTF
• • • •
OTF
• • • •
SVG
• •
WOFF
• •
webfonts.info/wiki/index.php?title=@font-face_browser_support

17. @font-face kits
‣ Contains:
‣ EOT, WOFF, TTF, SVG, Cufon, HTML, CSS
‣ Pre-built kits
‣ fontsquirrel.com/fontface
‣ Build your own
‣ fontsquirrel.com/fontface/generator

18. The bulletproof
@font-face syntax
A moving target

19. The basics
@font-face {
font-family: Gotham;
src: url('gotham.ttf');
}

20. The Bulletproof way
@font-face {
font-family: 'Gotham';
src: url('gotham.eot');
src: local('☺'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype');
}
paulirish.com/2009/bulletproof-font-face-implementation-syntax

21. Mo’ bulletproofer
@font-face {
font-family: 'Gotham';
src: url(‘gotham.eot’);
}
@font-face {
font-family: 'Gotham Rounded';
src: url(//:) format(“No404”),
url(‘gotham.ttf’) format (“truetype”);
}
readableweb.com/mo-bulletproofer-font-face-css-syntax

22. The new bulletproof
@font-face {
font-family: 'Gotham';
src: url('gotham.eot?') 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

23. Font hosting services
The easy way out

24. 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

25. Font hosting services
‣ Paid
‣ Typekit.com ‣ Free
‣ Fontdeck.com ‣ code.google.com/
webfonts
‣ webfonts.fonts.com
‣ typotheque.com
‣ Kernest.com

26. lostworldsfairs.com

27. Aaron Stanush
aaron@fourkitchens.com
Twitter: @aaronstanush
fourkitchens.com/presentations

28. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-
ShareAlike 3.0 licensed and copyright 2009 Four Kitchen Studios, LLC.