Fonts

Taking a quick browse of the web I came across this site:

http://www.whiskas.co.uk/

On first impressions I really like the font that use for their headers. Particulary those at the bottom of the page. At first i thought they were images but hovering over them shows that they are selectable text.

Can anyone tell me how this is done? As i think it looks much better (when used correctly) than typical Arial, Verdana, Helvetica etc..

It looks like they’re using sIFR w/ js to customize the fonts.

http://www.wakeuplater.com/website-building/use-your-own-fonts-a-simple-sifr-guide.aspx

The other accessible fancy font option is Facelift Image Replacement, aka FLIR (which is used nicely by the main MODx website).

Yup they’re using sIFR. I have been playing around with Cufon too lately but it needs a bit more work.

so which is the best easiest to work with sIFR, FLIR or cufon and which rounded sans serif font show up best.

I prefer FLIR myself right now. sIFR tends to have nasty pop-ins of content and Cufon is still a bit immature. YMMV on which font looks best: download and try them out!

I used to use sIFR extensively but after using it here: http://blog.zopa.com/ and finding it took ages to load (eventually replaced with a server side version), I switched to the jQuery Flash plugin which seems much snappier:
http://jquery.lukelutman.com/plugins/flash/example-text-replacement.html

With a bit of work you can make it do everything sIFR does, only faster

EDIT: FLIR - I tried that too, it’s nice and fast but sucks if you have multiple wrapping lines (at least in my experience).

I decided to give sIFR a go and it works fine. just one thing though - How do you change the size of the font?


I have created a class call .dax and called this in the cose/text i want to change. I added .dax to the sIFR call at the bottom of my page and sIFR correctly changes the font to the one in my flash video. This is great but how do i change the font size.

this should do it (using sIFR 3):

Quote from: therebechips at May 29, 2009, 11:47 AM

this should do it (using sIFR 3):

.sIFR-active .dax {
  line-height: 1em;
  font-size: 28px;
}

Hmm that makes no difference at all in sIFR 2. I have added to sIFR-screen.css which I presume is correct?