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
