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