Drupal Camp LA 2011: Typography modules for Drupal


Published on

This is a presentation from DrupalCampLA 2011 where I presented on typography options (via contributed modules) for Drupal.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Drupal Camp LA 2011: Typography modules for Drupal

  1. 1. TYPOGRAPHY ANDDRUPALAshok Modi – DrupalCampLA 2011
  2. 2. About me  Computer Systems Analyst at the California Institute of the Arts (http://calarts.edu)  Nice fonts make me smile.
  3. 3. About this presentation  Some module demonstrations  The contrib area does make it much easier   It is more efficient to do custom work at the theme layer (or even in a site module)  Do that if you feel comfortable.  Feel free to jump in.  If you have something to share, come up!
  4. 4. About this presentation  Various other methods   Flash Based Text Replacement, Javascript based will *not* be covered.  Focus on 4 modules  Image Based Text Replacement   Cufon  Using @font-face   Google Fonts   Webfont Loader API   @font-your-face  Some places to get nice fonts  Anything else?
  5. 5. Image Based Text Replacement  No issues with a flash blocker (like sIFR)  Don’t have to worry about licensing issues as much.  Quite a few options  Cufon (Most popular though 6.x no longer supported – it is, however, still fairly stable)  TextImage (Second best option)  FaceLift Image Replacement  ImageAPI Text Renderer  Signwriter
  6. 6. Image Based Text Replacement  Cufon  Download Cufon module (http://goo.gl/pxi1z)  Download external cufon js (http://goo.gl/AqZAq)  Generate a font definition (http://goo.gl/x0ar)  Move the js file to sites/all/libraries/cufon-fonts (or add to your theme).  DEMO
  7. 7. Using @font-face  Quickly become the standard.  Text remains unchanged.  Licensing issues…  Currently need many different font formats.  eot: IE4+  otf/ttf: Safari (iOS 4.2+), FF 3.5+, Opera, Chrome  svg: iOS < 4.1, Opera  woff: FF 3.6+, Opera, Chrome, IE9+, Safari 5.1+  Browsers load the font in different ways (some show plain text until font is downloaded, other hide text)
  8. 8. Using @font-face (cont’d)  Google Font Directory (http://goo.gl/M9f7)   Enable and go!   DEMO  Webfont Loader (http://goo.gl/ipc3U)   More setup work   Uses javascript to figure out when fonts are loaded   Slightly slower but more consistent behavior   Natively works with typekit, google fonts, fonts live, fontdeck and ‘custom’ sources   Create font packages which contain this information along with the css files to reference.
  9. 9. Using @font-face (cont’d)  Font-Your-Face (http://goo.gl/27ORm)  Enable and go (works with a number of providers)  Native providers include typekit, kernest, font squirrel, google fonts  6.x has ability to upload custom fonts (still to be ported to 7.x)  Integration between Webfont Loader and Font-Your- Face in works.  DEMO
  10. 10. Places to get nice fonts  Free, commercial use fonts   Kernest (http://kernest.com)   Font Squirrel (http://fontsquirrel.com)   Google Fonts (http://www.google.com/webfonts)  Subscription-based   Typekit (http://typekit.com)   Font Spring (http://fontspring.com)   Font Deck (http://fontdeck.com)   Fonts Live (http://fontslive.com)  Any others?
  11. 11. Questions?  Have something to share?  Come on up!  Interested in helping with some of the typography projects?  Let’s talk after!  What other presentations might be related and/or useful?  Drupal Design Skills 2012