Taking it to that level with cufon
So you've got yourself a solid drupal theme, and now you're sitting back looking at your work and thinking that it's good, but it could still be taken to that level.
Well, replacing some titles, basically some h1s and h2s with custom rendered fonts is one way to get it there, and using cufon is the answer. Sure, you could use the Dynamic Rendering module and sifr and do pretty much the same thing, but c'mon, cufon just sounds cooler than sifr... and it'll only take you about ten minutes to do this
and we all know quick and easy is the answer...
step one
find a font file you want to use. http://dafont.com has a bunch of truetype fonts that are free
step two
you need to download the cufon-yui.js script (attached to this node, but it has a .txt extension you have to remove... also you can download the js from here -> http://cufon.shoqolate.com/js/cufon-yui.js)
step three
take your TTF or OTF font and run it through this generator (http://cufon.shoqolate.com/generate/), which will result in a small script that embeds your font (such as MYFONT_400.font.js ) (400 is the font weight FYI..)
step four
create a file called MYTHEME.cufon.js which has the following code in it
if (Drupal.jsEnabled) {
$(document).ready(function() {
Cufon.replace('h1.title', { fontFamily: 'Gotham-Book' });
Cufon.replace('h2.title', { fontFamily: 'Gotham-Book' });
// Note you can add other generated fonts as well, to really take it to that level
// Cufon.replace('#fancy-title', { fontFamily: 'Some Other Font' });
});
}
step five
now you should have three js files so add them to your theme folder, and modify your theme's info file and add:
scripts[] = cufon-yui.js
scripts[] = MYFONT_400.font.js
scripts[] = MYTHEME.cufon.js
step six
crack open a frosty beverage (I have been enjoying Stone Brewery's IPA lately...), clear your cache, or just goto the Theme Selection page and resave it so that your new .info file gets used, and behold, your site just got taken to that level the agaric way
can't forget the source...
http://aaronwinborn.com/blogs/aaron/cuf%C3%B3n-alternative-sifr-image-replacement
Resolution
Searched words:
cufon, kick ass fonts, theming themeing ninja skillz, replace, sifr
File:
Comments
I prefer signwriter...
Depending on the site, Signwriter is often a better answer: it does the font rendering on the server side and caches it, so you have more control over the look/font/etc. It still puts the original text there, for SEO purposes as well as for easy copy/paste, but works in all browsers , even without JS.
Having some issues with cufon? this is helpful
it's most likely caused by the
unnecessary whitespace inside the :
<a href="http://twitter.com/@SomeName" title="Some Name">
Some Name
</a>
Changing it to
<a href="http://twitter.com/@SomeName" title="Some Name">Some Name</a>
Would likely solve the issue. We cannot afford to do extensive
(browser-like) white-space handling in cufón because it is actually
quite complicated. For example, the extra space would be needed in the
following case:
text<a href="http://twitter.com/@SomeName" title="Some Name">
Some Name
</a>
Alternatively you may set h2 a { display: block }, which should also
solve the issue. But with inline elements you have to be careful with
the whitespace.
Post new comment