Making Drupal beautiful with web fonts Designing in the @font-face of dangerAaron StanushDallas Drupal Days – July 9, 2011
A little bit of history
It only took a decade• 1997: CSS2 introduces @font-face • IE4 supports @font-face• 2008: Safari 3.1 supports @font-face• 2...
Before                        After• sIFR                        • Web fonts • Flash-based                 • CSS + Web fon...
Then• Arial          • Times• Georgia        • Palatino• Trebuchet MS   • Helvetica• Verdana        • Courier New• Impact ...
aigcorporate.com
smartmoney.com
Nowlostworldsfairs.com/moon
The new web fontecosystem
Foundries                 &                  Designers Fonts      Museo      Gotham       Avenir   Formats      TTF   WOFF...
Commerical fonts‣   Foundries    ‣   Hoefler Frere-Jones, FontFont, House Industries,        EmType, exljbris, etc.‣   Font...
Web font licensingIt’s complicated. Everybody has their own rules.webfonts.info/wiki/index.php?title=Web_fonts_licensing_o...
Free and open source• Font Squirrel • fontsquirrel.com• Google Web Fonts • code.google.com/webfonts• League of Movable Typ...
SIL Open font license“         It means that youre allowed to use these fonts         personally or commercially, as long ...
Web font formats• Embedded OpenType (EOT)   • Web Open Font Format                             (WOFF) • TrueType + DRM    ...
Why do we need all these crazy font formats?Credit: shoze.blogspot.com
@font-face browser support             Firefox 3.6+   Chrome 6+     IE 6-8     IE9        Safari 3.1+   iOS 4.2   Android ...
@font-face kits• Multiple file types • EOT, WOFF, TTF, SVG, Cufon, HTML, CSS• Pre-built kits • fontsquirrel.com/fontface• B...
The bulletproof@font-face method
@font-face@font-face {  font-family: Gotham;  src: url(gotham.ttf);  }
the real @font-face  @font-face {    font-family: Gotham;      src: url(gotham.eot) format(eot),      src: url(gotham.eot?...
EOT: IE9 compatibility mode@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?...
EOT: IE6, 7, 8@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?#iefix) forma...
WOFF: Chrome, Firefox, IE9@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?#...
TTF: iOS 4, legacy browsers@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?...
SVG: iOS 3@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?#iefix) format(em...
The joy of multipleweights
Bold and non-bold. Hooray.     Verdana              Verdana bold     Verdana italic       Verdana bold italic@h1 {  font-f...
Real fonts have big familiesGotham LightGotham Light ItalicGotham BookGotham Book ItalicGotham MediumGotham Medium ItalicG...
Variant                font-weight   font-styleGotham Light           100           normalGotham Light Italic    100      ...
You can apply the same font-family name to each variant, as long as youset the font-weight and font-style for             ...
Calling each font by name. Eh.@font-face {  font-family: ‘Gotham Light’;  src: url(gotham-light.ttf) format(truetype);  fo...
One family, many weights. Boom.  @font-face {    font-family: ‘Gotham’;    src: url(gotham-light.ttf) format(truetype);   ...
Italics too  @font-face {    font-family: ‘Gotham’;    src: url(gotham-light-italic.ttf) format(truetype);    font-weight:...
Web font hostingservices
Web font hosting• Pros                  • Cons • Large selection of    • Not free: Pay by   high-quality fonts     pagevie...
Web font hosting services• Paid                  • Free • Typekit.com           • google.com/                           we...
Who’s the best?bit.ly/web-font-hosts
Web fonts in Drupal
@font-your-face module• Supports multiple font-hosting services• No Javascript to add to your templates• Browse font colle...
Best practices
Best practices• Only load the fonts you need• Always use fallback fonts• FOUT - Flash of Unstyled Text• Font events• Test,...
Web design isexciting again
lostworldsfairs.com
Aaron Stanushaaron@fourkitchens.com                 @aaronstanushfourkitchens.com/presentations   slideshare.net/fourkitch...
Thanks! All content in this presentation, except where noted otherwise, is Creative Commons Attribution- ShareAlike 3.0 li...
Upcoming SlideShare
Loading in …5
×

Making drupal beautiful with web fonts

9,993 views

Published on

Published in: Technology, Art & Photos
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,993
On SlideShare
0
From Embeds
0
Number of Embeds
112
Actions
Shares
0
Downloads
67
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Making drupal beautiful with web fonts

  1. 1. Making Drupal beautiful with web fonts Designing in the @font-face of dangerAaron StanushDallas Drupal Days – July 9, 2011
  2. 2. A little bit of history
  3. 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. 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. 5. Then• Arial • Times• Georgia • Palatino• Trebuchet MS • Helvetica• Verdana • Courier New• Impact • Comic Sans
  6. 6. aigcorporate.com
  7. 7. smartmoney.com
  8. 8. Nowlostworldsfairs.com/moon
  9. 9. The new web fontecosystem
  10. 10. Foundries & Designers Fonts Museo Gotham Avenir Formats TTF WOFF EOT SVG @font-face Font hosting Self-hosted services
  11. 11. Commerical fonts‣ Foundries ‣ Hoefler Frere-Jones, FontFont, House Industries, EmType, exljbris, etc.‣ Font stores ‣ FontShop.com ‣ MyFonts.com
  12. 12. Web font licensingIt’s complicated. Everybody has their own rules.webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview
  13. 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. 14. SIL Open font license“ It means that youre 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/OFLtheleagueofmoveabletype.com/manifesto
  15. 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. 16. Why do we need all these crazy font formats?Credit: shoze.blogspot.com
  17. 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. 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. 19. The bulletproof@font-face method
  20. 20. @font-face@font-face { font-family: Gotham; src: url(gotham.ttf); }
  21. 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. 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. 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. 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. 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. 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. 27. The joy of multipleweights
  28. 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. 29. Real fonts have big familiesGotham LightGotham Light ItalicGotham BookGotham Book ItalicGotham MediumGotham Medium ItalicGotham BoldGotham Bold ItalicGotham BlackGotham Black Italic
  30. 30. Variant font-weight font-styleGotham Light 100 normalGotham Light Italic 100 italicGotham Book 200 normalGotham Book Italic 200 italicGotham Medium 300 normalGotham Medium Italic 300 italicGotham Bold 400 normalGotham Bold Italic 400 italicGotham Black 500 normalGotham Black Italic 500 italic
  31. 31. You can apply the same font-family name to each variant, as long as youset the font-weight and font-style for each.
  32. 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. 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. 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. 35. Web font hostingservices
  36. 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. 37. Web font hosting services• Paid • Free • Typekit.com • google.com/ webfonts • webfonts.fonts.com • Fontdeck.com • Kernest.com
  38. 38. Who’s the best?bit.ly/web-font-hosts
  39. 39. Web fonts in Drupal
  40. 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. 41. Best practices
  42. 42. Best practices• Only load the fonts you need• Always use fallback fonts• FOUT - Flash of Unstyled Text• Font events• Test, test, test
  43. 43. Web design isexciting again
  44. 44. lostworldsfairs.com
  45. 45. Aaron Stanushaaron@fourkitchens.com @aaronstanushfourkitchens.com/presentations slideshare.net/fourkitchens
  46. 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.

×