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.
   
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.

Tags: clickable sIFR 3 links, create links in sIFR3, links in sIFR, sIFR 3 a href, sIFR 3 links, sIFR links