R – sIFR -> Semibold Font Problem

sifr

I'm trying to use Myriad Pro Semibold Condensed as my headline font. I've been able to get other states of the font to work, both Myriad Pro Regular and Myriad Pro Condensed work properly.

Here's what I'm seeing: http://php.saysoma.org/. As you can tell, the Regular and Condensed states work, but the third style, semibold condensed, is not visible.

Here's what I have in my sifr-config file:

sIFR.replace(myriad3, {
  selector: 'h4',
  css: [ 
  '.sIFR-root { letter-spacing: -1.2}'
  ,'a { text-decoration: none; }'
  ,'a:link { color: #000000; }'
  ,'a:hover { color: #772224; }'
 ],
  wmode: "Transparent"
});

And in my css file:

.sIFR-active h2, .sIFR-active h3, .sIFR-active h4 {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;
  font-size: 30px;
}

I'm using sIFR r436 and Flash CS4 to render the files.

Any ideas?

Thanks!

Best Answer

After noticing that the third Flash object was only 10 px high, I was able to get the third line by adding style to your page:

* {height:42px!important;width:100%!important;float:left!important;display:block!important}
h4 {color:#ff0000}

This doesn't fix the problem, but it does show that it's a width/height issue. My understanding of sIFR is that it creates the flash object, and then expands the text size until it fills the bounding box. For whatever reason, your bounding box is too small on the third one.

Add some junk stuff to the page, make it more of a realistic layout. I think you are running up against some browser default sizes. Maybe try a CSS reset stylesheet too? Really, I think this might be a bug in sIFR, since your sample is so basic.

Related Topic