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.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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