Although I am no longer a web designer, I will maintain some of the informational posts that I had written in the past until they have become deprecated (okay who’s fooling who here, they will be up way longer than that).
I recently decided to take another look at sIFR fonts. What are sIFR fonts you say? Well siFR is a remarkable technique for replacing headers with smooth, anti-aliased fonts. There is a great plugin for wordpress that makes all of this (relatively) easy but it is not without its problems.
The plugin is CG-FlashyTitles from Chaitgear and allows the blogger to use flash fonts instead of the aliased html header that is all bitmapped and not all that pretty. The description on the site makes it sound like an activate and go but it isnt quite that simple. First, unless you copy the sIFR folder from the plugin folder and put it at the same tree level as the plugin folder you aren’t going to see a whole lot. This isnt documented very well but is about the most difficult part of installing this plugin.
One of the early problems I have found is with font sizing. For some reason I was unable to change the size of the font from the plugin panel (even its claims of override didn’t) but changing the padding size seemed to do the trick.
This is where it turned out to be more like a CSS hack than good coding but this is why I bring it up.
How I have figured out how to overcome the CG-Flashytitles/sIFR font size bug.
So say I have an attribute like this
h2
{
padding:10px;
}
with proper CSS all this would do is affect the padding around the H2 tag but with CG-Flashytitles this is a bit different as it changes the size of the rendered flash text. This is what I have found works as a solution so that you can resize the font and not have its positioning affected by wonky padding
h2
{
padding:10px;
padding-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
}
This is a really ugly fix but Im not sure how to address this. To be honest Im willing to overlook it because the end results of sIFR are just that nice. Plus as it is still searchable by search engines I can’t be stuffed. If there is a fix however Id be more than happy to hear it. Until then Im going to keep playing around with CG-Flashytitles and see what I can do. Maybe they’ll get a support forum.
and the old comment:
Frederick Says:
March 11th, 2009 at 4:46 pm editThis post lead me to finding a solution to a similar problem I was having. I found that in my case the line-height that I had set for the h2 style was also effecting the size of the text output by CG-Flashytitles. Removing the line-height and using the padding hack you’ve published here seems to have done the trick. Thanks!
Share this Post
