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