TYPOGRAPHY AND DRUPAL Ashok Modi – DrupalCampLA 2011

About me

  Computer Systems Analyst at the California Institute of the Arts (http://calarts.edu)

  Nice fonts make me smile.

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!

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?

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

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

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)

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.

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

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?

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