In response to several messages connected with my last realisation (www.rapduma.pl) I’ve decided to write a few words about entering anti-aliasing on the page based on PHP-Fusion. Used in skin „miracle” is nothing else but, probably the most famous, cufon. It admits not only of font smoothing, what’s no more a great achievement but also to attach to our website free-form font, just as we need. A similar effect can be obtained by using sIFR. There’s a question – why cufon? There are two things that speak for him: the lightness and the fact that it’s fully written in JavaScript. Contention created on the flash slows down the computer (e.g. when there’s a large number of elements to smoothing) and needs to strain to human patience and constant loching up and calling to reinstall it. The best solution would be to check by yourself which technology is more atractive for us.

Now, let’s go to the point.

1. We enter www.

2. From menu at the top we select download and save the open file as cufon-yui.js.

3. Then we select the font file we’re interested in (I’ll use Arial as an example). We accept the rules and click „Let’s do this!”.

4. We download the file fontname_400.font.js – Arial_400.font.js in my case.

5. Then we throw the files cufon-yui.js and Arial_400.font.js to the includes dir.

6. Next we go to the themes/templates/header.php and in the head section we add:

1
2
3
4
5

<script src='".INCLUDES."cufon-yui.js' type='text/javascript'></script>
<script src='".INCLUDES."Arial_400.font.js' type='text/javascript'></script>
<script type='text/javascript'>
Cufon.replace('h1');
</script>

7. And that’s all. All headers will be smoothed from now.

8. In case we want to use this technique to bigger number of elements we should change the code above into:

1
2
3

<script type='text/javascript'>
Cufon.replace(['h1','.smooth']);
</script>

I hope it’ll be useful to graphic designers who work with this great system 🙂

BIG Thanks for Natalie 🙂