How to create clickable links in sIFR3

Tuesday June 9, 2009 Adham Dannaway

How to create clickable links in sIFR3

sIFR 3 is a great way to embed a font in a website. sIFR 3 uses a combination of Flash, CSS and javascript to dynamically display fonts on your website. It’s quite simple to use sIFR 3 to embed a font in a heading on your website like a h1, h2, or h3 element. But what about when you want to make that heading into a clickable link? Can sIFR 3 be used to create a clickable link? Yes it can, and it’s quite simple to set up.

I’ll assume that you have already set up sIFR 3 on your website and it is working fine for your headings. As an example lets say that you have embedded the “Georgia” font in your “h1” tags on your website and they are working. But you would like your headings to be links to other pages on your website. Below are a few steps to create clickable links with sIFR 3 that you can style with hover effects using CSS.

  1. Let’s put the link tag around our h1 heading like so. 
    <h1><a href="yourlinkgoeshere">Your Heading Text</a></h1>
  2. Doing this results in the heading text turning the ugly default blue link colour with an underline, so we need to style it.
    default-sifr3-link
  3. Now let’s add the h1 styles to our main CSS stylesheet. Make sure the h1 element has a height. It will look something like this: 
    h1{
font-size:36px;
color:#FFFFFF;
height:45px;
}
  4. Find the “sIFR.replace” function (it should be at the bottom of your sifr.js file) and add the following styles so that your function looks something like the one below. This will allow you to style your sIFR link text. 
    sIFR.replace(georgia,{
selector:'h1',
wmode:'transparent',
css:['.sIFR-root { color: #ffffff; }',
'.sIFR-root a { color: #ffffff; text-decoration: none; }',
'.sIFR-root a:hover { color: #ffffff; text-decoration: none; }',
'.sIFR-root a:visited { color: #ffffff; text-decoration: none; }']
});
  5. You can add more styles if you like but these are the basic styles to control your links. I have made mine white links with no text decoration or hover effects.

So that’s how you can create links with sIFR 3 that you can style with some simple CSS. There are lots of other ways to embed fonts in your website, one of the nicest ways is @font-face.

Related posts:
  1. Two great ways to embed a font in your website
  2. How to create a favicon for your website
  3. Simpsonize yourself! Create your own Simpsons character
  4. Create a logo design in minutes, not hours

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Tags: , , , , ,


18 Comments
  1. Joko Ruwhof on September 11, 2009

    Halleluja! It worked! I’ve been searching and debugging for hours and stumbled upon your solution. Yes! Thanks!

  2. Cre8ive Commando on September 11, 2009

    That’s great Joko 🙂

  3. Verena on September 17, 2009

    oh man THANK YOU SO MUCH!! you saved my life!!

  4. Ben Harrison on November 25, 2009

    Brilliant thanks! Been searching for DAYS for a solution to this and finally found this page. Top man!

  5. nandroid on December 14, 2009

    It works!!
    Great!!

    THANK YOU!!

  6. Tschy on February 3, 2010

    cool – does this work in all browsers and IE-versions and in all flashplayer-versions ? very curious about that! thx!

  7. Cre8ive Commando on February 3, 2010

    @Tschy – I have tested it out on most of the main browsers (IE 6,7 and 8, Firefox, Safari) and it works fine.

    You can try saving your SWF font file as an older version of Flash if you’re worried about compatibility although that will limit the amount of filter effects you can apply to your flash fonts.

    Hope that helps 🙂

  8. Tschy on February 4, 2010

    @Cre8ive Commando: yes, it helped!
    THANK YOU! =)

  9. keekoon on February 6, 2010

    A huge thank you !
    keekoon

  10. Jake on March 9, 2010

    Works great! This was located in my sifr-config.js file.

  11. jake on May 7, 2010

    sweet – the other sifr if out there is very vague on this point

    thanks from another jake

  12. Filigrana on July 5, 2010

    Hi! I’ve read your post but i need help…i need the links of a menu working, and i can’t do it! The menu is here http://www.amordulzuras.blogspot.com. If i use a.menu, everything looks fine but links doesn’t work. And if i put #menu, links do work, but without the styles i want. Could you help me please? Thanks!

  13. Cre8ive Commando on July 7, 2010

    @Filigrana – It looks like you’re using Cufon on your website. That is probably a better option than sIFR for a menu. You could also try @font-face which I think is one of the nicest ways of embedding a font in your website. 🙂

  14. Filigrana on July 11, 2010

    🙂 Yes, i ‘m using cufon now because i couldn’t solve the problem with sifr links! 🙂 but now the special font only appears when using internet explorer! i don’t know what to do…please give me a hint!

  15. hdwebpros on August 17, 2010

    Hey. I am using SIFR in a list. I don’t want to give up using it since I have come so far. Plus, this works on IE, and last I checked @fontface doesn’t. My issue.
    When you load the page the menu links work fine. As soon as you click on something else or even scroll down, the links and hover shut off.
    Any advice?

  16. hdwebpros on August 17, 2010

    Oh yeah, demo site at
    http://www.happydogwebproductions.com/cadillac

Trackbacks

  1. Two great ways to embed a font in your website | Cre8ive Commando

    […] is sometimes difficult to create a link from text that uses sIFR […]

  2. siFR 3 vs @font-face « Jaime's Expressions

    […] the default blue text and underline, I defined the styles in the siFR-replace function based on an article by Adham Dannaway. One thing that took me a while to figure out is that you cannot include a class […]


0

Have your say!