Your SlideShare is downloading. ×
Drupal Camp LA 2011: Typography modules for Drupal
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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.

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. TYPOGRAPHY ANDDRUPALAshok Modi – DrupalCampLA 2011
  • 2. About me  Computer Systems Analyst at the California Institute of the Arts (  Nice fonts make me smile.
  • 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. 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. 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. Image Based Text Replacement  Cufon  Download Cufon module (  Download external cufon js (  Generate a font definition (  Move the js file to sites/all/libraries/cufon-fonts (or add to your theme).  DEMO
  • 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. Using @font-face (cont’d)  Google Font Directory (   Enable and go!   DEMO  Webfont Loader (   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. Using @font-face (cont’d)  Font-Your-Face (  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. Places to get nice fonts  Free, commercial use fonts   Kernest (   Font Squirrel (   Google Fonts (  Subscription-based   Typekit (   Font Spring (   Font Deck (   Fonts Live (  Any others?
  • 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