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

1. TYPOGRAPHY AND
DRUPAL
Ashok Modi – DrupalCampLA 2011

2. About me
 Computer Systems Analyst at the California Institute
of the Arts (http://calarts.edu)
 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 (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. 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 (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. 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. 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. 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