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

Like this? Share it with your network

Share

Drupal Camp LA 2011: Typography modules for Drupal

on

  • 2,689 views

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.

Statistics

Views

Total Views
2,689
Views on SlideShare
2,689
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Drupal Camp LA 2011: Typography modules for Drupal Presentation Transcript

  • 1. TYPOGRAPHY ANDDRUPALAshok 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