Drupal Camp LA 2011: Typography modules for Drupal

  • 2,834 views
Uploaded 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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,834
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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