Flash replacement fonts

I’m trying to get sIFT fonts working on my static homepage. I had the XHTML and CSS coded by a PSD to HTML site, and so now trying to work backwards to skin a custom homepage by building a custom template.

I’ve installed the CG-Flashytitles plugin, but because the XHTML and CSS is already there I don’t want to define the style with the limited variables in the plugin style editor.

I’ve got as far as displaying the flash-replaced font, but the non-flash alternative is still displaying. I’m having trouble using the <span> correctly in the html.

This is the html in the original build:

<div class="column-head">
<h3><span>Upcoming festivals</span></h3>
</div>

but to get it working as far as I have done I had to go into Firebug and inspect the output html that was created after the <span> returned true for sIFR flash (i.e. the alternate non-sIFR text shouldn’t display). I then pasted it into the opening <span> tag in my custom template. Here’s the code:

<div class="column-head"><
<span>
<embed width="234"
height="29"
src="wp-content/plugins/sifr/bunny.swf"
quality="best"
flashvars="txt=Upcoming festivals&amp;
textcolor=#3e392b;
&amp;hovercolor=#78b24c&amp;
linkcolor=#333333&amp;
w=234&amp;h=29"
wmode="transparent"
bgcolor="transparent"
sifr="true"
type="application/x-shockwave-flash"
class="sIFR-flash"
style="width: 234px; height: 29px;"/>
Exciting Adventures</span></h3></div>

This is the relevant CSS:

/*sIFR*/
.sIFR-flash {
    visibility:visible !important;
    margin:0;
}
.sIFR-replaced {
    visibility:visible !important;
}
span.sIFR-alternate {
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:0;
    display:block;
    overflow:hidden;
}
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}
.sIFR-hasFlash .today h2{
    margin:0;
    font-size:20px;
    visibility:visible;
}
.sIFR-hasFlash .column-head h3{
    margin:0;
    font-size:25px;
    visibility:visible;
}
.sIFR-hasFlash .content-heading h2{
    margin:0;
    font-size:44px;
    visibility:visible;
}
.sIFR-hasFlash .green-heading h3{
    margin:0;
    font-size:44px;
    visibility:visible;
}

How do I get the <span> to run correctly? At the moment I’m getting two titles: <h3> text displayed with the flash-alternative CSS, and then the Flash replacement image displaying correctly (apart from picking up text colour).

The flash image appears immediately to the right of the of the alternative text, as if the current <span> is adding an additional title.

I’ve realised that the above code manually inserts “Upcoming festivals”:

flashvars="txt=Upcoming festivals&

When it should be picking up “Exiting adventures” within the <h3> tags. So at the moment it displays “Upcoming festivals” twice, once styled with Flash, once styled as using the alternative CSS.

Any help greatly appreciated!