Home / Design / How to Add Funky Fonts to Your Joomla Site 
Design
Jul
10
2007
How to Add Funky Fonts to Your Joomla Site

We've had a 24-hour make-over on Alledia. Throughout today we're using the SimSun font for all headlines on the site.


Its made possible by a cool technology called sIFR (or Scalable Inman Flash Replacement), created by Mike Davidson. It solves the problem that disappoints many people when they first start designing websites - browsers only accept a limited number of fonts. Some people try to get around this obstacle by using images for text, but this technique is bad for SEO, invisible to screenreaders and difficult to change. sIFR uses Javascript and Flash to solve all those issues.


However, one thing you need to do is create a special Flash file to hold your font. In this quick tutorial we'll show you how to use sIFR on your Joomla site in 8 easy steps:

    Simple Instructions to Create Cool Font Headings in Joomla

    Making the Font Work with sIFR

    1. Download the OpensIFRr release from Sourcforge. Unfortunately, its only available for Macs currently. Using Windows is possible, but you'll need a copy of Flash and these instructions.
    2. Use OpensIFRr to open your font. It needs to be a True Type Font. You'll know if it is because the file extension is .ttf.
    3. Create a .swf file using OpensIFRr. It has a habit of crashing sometimes. If it does, try and convert nearly all of the characters, but don't check the "all" option.
    4. Upload your new .swf file to the mambots/system folder.

    Making sIFR Work with Joomla

    1. Download the sIFR plugin from Joomla-addons.org.
    2. Install it and add the code to the bottom of your template.
    3. Change the code to reflect the color of your headlines and the name of your .swf file.
    4. Voila! Your component and content headings will now show in a snazzy new font.

    Which browsers does this work with?

    About the same as the number percentage as Flash itself - around 90%. PC IE 5+, Safari, Firefox, Opera 7+, Omniweb, and even Konqueror.

    More Resources


     

    Comments  

     
    #1 Brian Teeman 2007-07-11 02:51
    If you dont have a Mac etc you can get any font converted here http://ianpurton.com/sifr/ free of charge.
    Quote
     
     
    #2 Sharad 2007-08-23 21:09
    I didn't get the second step of Making sIFR Work with Joomla. Please help me how to edit the content. Whether we have to open some file to edit or it can be done in wysiwyg editor. Plz help me...
    Quote
     
     
    #3 marikas 2007-11-30 10:48
    This is a shameless plug, but the ninjasifr mambot from www.ninjoomla.com is a much more advanced version of the sIFR plugin. It has both more options in the backend, and a newer version of sIFR. Whats more, it also comes as a module (mambots don't always fire on component pages, and using an sIFR module instead is the perfect workaround.

    Steve, please delete this post if you deem it inappropriate.

    Cheers to all.
    Quote
     
     
    #4 Steve Burge 2007-11-30 10:52
    Hi Marikas

    Self-promotion is always welcome if its well explained :-)

    Will give your plugin a try.

    Steve
    Quote
     
     
    #5 CFA Level 1 2008-01-13 15:47
    Thanks for this useful tip. I've been searching all over for something like this. :-)
    Quote
     
     
    #6 Alex GraphicFusion Design 2008-08-31 04:59
    Does anyone know if the new sifr plugin still has the front end editing bug?
    Quote
     
     
    #7 alexisfo 2009-05-24 07:01
    club.freakedout.de/jsifr3-and-jsifr3-pro.html

    All the free font replacement you need for joomla easy to install and easy to use

    extensions.joomla.org/extensions/style-&-design/typography/6081/details

    enjoy
    Quote
     
     
    #8 Judy 2009-09-04 10:19
    I am only given fonts in .fam file format - seems it is for Mac. How do I get this converted and installed for Joomla?
    Quote
     
     
    #9 Super_Cat 2009-09-23 01:56
    is it compatible with joomla 1.5.11
    Quote
     

    Add comment


    Security code
    Refresh