1. Making Drupal beautiful
with web fonts
Designing in the @font-face of danger
Aaron Stanush
Dallas Drupal Days – July 9, 2011

2. A little bit of history

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

4. Before After
• sIFR • Web fonts
• Flash-based • CSS + Web font file
• Liked by foundries • Hosted option
• Hated by designers • WOFF = Security
• Cufón • It’s just text
• Javascript/JSON
• Lightweight
• Not trusted by foundries

5. Then
• Arial • Times
• Georgia • Palatino
• Trebuchet MS • Helvetica
• Verdana • Courier New
• Impact • Comic Sans

6. aigcorporate.com

7. smartmoney.com

8. Now
lostworldsfairs.com/moon

9. The new web font
ecosystem

10. Foundries & Designers
Fonts Museo Gotham Avenir
Formats TTF WOFF EOT SVG
@font-face
Font hosting
Self-hosted
services

11. Commerical fonts
‣ Foundries
‣ Hoefler Frere-Jones, FontFont, House Industries,
EmType, exljbris, etc.
‣ Font stores
‣ FontShop.com
‣ MyFonts.com

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

13. Free and open source
• Font Squirrel
• fontsquirrel.com
• Google Web Fonts
• code.google.com/webfonts
• League of Movable Type
• theleagueofmovabletype.com
• Lost Type Co-op
• losttype.com

14. SIL Open font license
“
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.
http://scripts.sil.org/OFL
theleagueofmoveabletype.com/manifesto

15. Web font formats
• Embedded OpenType (EOT) • Web Open Font Format
(WOFF)
• TrueType + DRM
• W3C standard (soon)
• Created by Microsoft
• 40% smaller than TTF
• TrueType (TTF)
• Contains metadata
• Standard desktop
format
• SVG
• Used for iOS 3

16. Why do we need all these
crazy font formats?
Credit: shoze.blogspot.com

17. @font-face browser support
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

18. @font-face kits
• Multiple file types
• EOT, WOFF, TTF, SVG, Cufon, HTML, CSS
• Pre-built kits
• fontsquirrel.com/fontface
• Build your own
• fontsquirrel.com/fontface/generator

19. The bulletproof
@font-face method

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

21. the real @font-face
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?#iefix') format('embedded-opentype'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}
fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

22. EOT: IE9 compatibility mode
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?#iefix') format('embedded-opentype'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}
IE9 compatibility mode

23. EOT: IE6, 7, 8
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?#iefix') format('embedded-opentype'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}
Unfortunately, you need the ?# to trick IE.

24. WOFF: Chrome, Firefox, IE9
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?#iefix') format('embedded-opentype'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}

25. TTF: iOS 4, legacy browsers
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?#iefix') format('embedded-opentype'),
url('gotham.woff') format('woff'),
url('gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}

26. SVG: iOS 3
@font-face {
font-family: 'Gotham';
src: url('gotham.eot') format('eot'),
src: url('gotham.eot?#iefix') format('embedded-opentype'),
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"

27. The joy of multiple
weights

28. Bold and non-bold. Hooray.
Verdana Verdana bold
Verdana italic Verdana bold italic
@h1 {
font-family: Verdana;
font-weight: bold;
}
@h2 {
font-family: Verdana;
font-weight: normal;
}

29. Real fonts have big families
Gotham Light
Gotham Light Italic
Gotham Book
Gotham Book Italic
Gotham Medium
Gotham Medium Italic
Gotham Bold
Gotham Bold Italic
Gotham Black
Gotham Black Italic

30. Variant font-weight font-style
Gotham Light 100 normal
Gotham Light Italic 100 italic
Gotham Book 200 normal
Gotham Book Italic 200 italic
Gotham Medium 300 normal
Gotham Medium Italic 300 italic
Gotham Bold 400 normal
Gotham Bold Italic 400 italic
Gotham Black 500 normal
Gotham Black Italic 500 italic

31. You can apply the same font-family
name to each variant, as long as you
set the font-weight and font-style for
each.

32. Calling each font by name. Eh.
@font-face {
font-family: ‘Gotham Light’;
src: url('gotham-light.ttf') format('truetype');
font-weight: 100;
}
h2 {
font-family: ‘Gotham Light’;
}

33. One family, many weights. Boom.
@font-face {
font-family: ‘Gotham’;
src: url('gotham-light.ttf') format('truetype');
font-weight: 100;
}
@font-face {
font-family: ‘Gotham’;
src: url('gotham-black.ttf') format('truetype');
font-weight: 500;
}
h1 { /* Gotham Black */ h2 { /* Gotham Light */
font-family: ‘Gotham’; font-family: ‘Gotham’;
font-weight: 500; font-weight: 100;
} }
456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple

34. Italics too
@font-face {
font-family: ‘Gotham’;
src: url('gotham-light-italic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
.caption {
font-family: ‘Gotham’;
font-weight: 100;
font-style: italic;
}
456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple

35. Web font hosting
services

36. Web font hosting
• Pros • Cons
• Large selection of • Not free: Pay by
high-quality fonts pageviews or per
font
• Very little coding
• No desktop version
• No worrying about of the font
licensing
• Dependent on third-
• No expensive font party service
purchases

37. Web font hosting services
• Paid • Free
• Typekit.com • google.com/
webfonts
• webfonts.fonts.com
• Fontdeck.com
• Kernest.com

38. Who’s the best?
bit.ly/web-font-hosts

39. Web fonts in Drupal

40. @font-your-face module
• Supports multiple font-hosting services
• No Javascript to add to your templates
• Browse font collection inside Drupal
• Assign CSS selectors through the UI
drupal.org/projects/font-your-face

41. Best practices

42. Best practices
• Only load the fonts you need
• Always use fallback fonts
• FOUT - Flash of Unstyled Text
• Font events
• Test, test, test

43. Web design is
exciting again

44. lostworldsfairs.com

45. Aaron Stanush
aaron@fourkitchens.com @aaronstanush
fourkitchens.com/presentations slideshare.net/fourkitchens

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