WP sIFR, Wordpress sIFR Plugin
Disclaimer: This plugin is meant to facilitate the use of sIFR. Unfortunately, I have had limited availability lately, and since most issues tend to be related to sIFR and not the plugin, it is hard for me to offer full support at the moment. If you have a plugin related question, please comment or use the contact forms. If you have a sIFR related issue, you will most likely be better off heading over to Stack Overflow, which acts as the sIFR support forum:
http://stackoverflow.com/questions/tagged/sifr
I am trying to get caught up on questions now, and am working on 2.8 testing and a new release. It will hopefully be ready in the next 2-3 weeks. Questions about sIFR alone, may not get a timely answer here.
- About
- Download
- Installation
- Create Fonts
- Contact (feature request, report bugs)
- Future WP sIFR Features
- FAQ
- Comments
About
0.6.8.1 Adds some much-needed functionality. It is now recommended that you move your fonts folder into your theme so that the fonts won’t be overwritten when you upgrade.
0.6.6 Fixed a small change that caused some servers to stop working. If things stopped working for you, please upgrade to the latest version.
Important Upgrade Information
If you use Wordpress’ built-in upgrade system, it will delete your fonts, unless you move your fonts folder into your theme instead. WP sIFR will automatically see the new location and no settings should be lost. If you do overwrite the fonts, your settings will be deleted the next time you visit the settings page. If you accidentally delete your fonts, replace them before going to the settings page. This is one of our main concerns for the next version.
WP sIFR
WP sIFR was created to remove the complications from getting custom fonts on a Wordpress site. With WP sIFR, you only have to upload your SWF font file to the plugin directory and then login, activate it, and configure its styles all in the Settings panel.
WP sIFR benefits
- Works on subpages
- Simple backend code and setup
- No customization necessary outside of Wordpress Admin
- New fonts working on your site in under five minutes
- Protection against Adblock on Macs using Firefox 3 (text is still shown)
Font Settings and Deletion
Currently, to simplify font addition and removal, WP sIFR removes all settings for the removed font when you delete it from the fonts folder. This is permanent. The addition and removal script runs on plugin activation and when the Settings Panel page is visited. Be careful deleting fonts, or you could lose your settings. This will change in the next major release.
Firefox on Macs and Adblock
WP sIFR has the ability to detect against Macs using Firefox 3 with an Adblock add-on. If it detects this configuration, it will disable sIFR on your site for that user. This means that your text will still be shown, but it will not be sIFR text, like when a user has javascript disabled. It will not interfere with other Mac users who are not using FF3 or are using FF3 without Adblock.
Download
Download WP sIFR at the Wordpress Plugin Repository.
WP sIFR Installation
- Upload the ‘wp-sifr’ folder to the ‘/wp-content/plugins/’ directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- Add fonts (SWF files) to the fonts folder
- Set the options in the admin panel under ‘Settings’ for your fonts
Creating Fonts
To create a font, you can upload your TTF file to: sIFR Generator. Or you can follow these directions: sIFR Wiki.
After fonts are created in Flash, upload them to the “fonts” directory in the plugin folder and they will show up here. Then you can activate and manage the font settings.
If at first you don’t succeed… try another font. There are a few reasons why a font may not work. If it is created for an older version of sIFR or if it is overly complicated (like handwritten fonts) or it may just have been corrupted somehow. If a font isn’t working, try another font before spending hours trying to get that one to work. It could also be good to start with the included fonts until you have one working, just to make sure that everything is working with a font that has been tested.
Contact
Donate
If you like the plugin, you can support development by donating.
Future Features
- Currently, to simplify font addition and removal, WP sIFR removes all settings for the removed font when you delete it from the fonts folder. This is permanent. A future edition will store the settings, and only make sure that the font is deactivated, so that settings are not lost on a whim, and will come back if a font is reuploaded.
- Allow ticks and commas in the CSS
- Fix the space in the file name issue
FAQ
It doesn’t work… ?
- Does your template have a <?php wp_head(); ?> in the ‘header.php’ file? That one is important.
- Does your SWF file’s filename have any funny characters in it? Spaces, dashes, and underscores should work now, but other characters could cause problems.
- Are you using Firefox on a Mac? sIFR works great on any browser, except when Adblock is messing up Flash functionality. For the time-being, we have disabled sIFR on Macs using Firefox 3 and Adblock. The method isn’t fullproof though and sometimes Adblock may still gum up the works. When the detection works, you still see your HTML text, just with sIFR. When the detection doesn’t work, you won’t see any text at all. It will not interfere with Mac Firefox that is not running Adblock. If you are on a Mac, with Firefox 3, and no Adblock add-on, everything should be hunky-dory for you.
- Be sure that you do not delete the wmode setting from the “Advanced Settings”. It can be “opaque” or “transparent”, but it has to be there for IE7.
- If you specify a CSS state for the font that you did not include in the SWF, the font will not show up. EXAMPLE: If you specify “font-weight: bold;” and you only included the normal and italic versions, nothing will show. The font will be hidden, but won’t be replaced properly. Sometimes it is beneficial to leave out some states to reduce filesize.
I heard you could make drop shadows?
Yep. With 0.6.7 and above, you can use the “Advanced Settings” field. Paste code similar to this:
filters: {
DropShadow: {
knockout: false,
distance: 2,
blurX: 2,
blurY: 2,
color: '#000000',
strength: .15,
angle: 90
}
}
Mess around with it and have fun.
How do I create fonts?
To create a font, you can upload your TTF file to sifrgenerator. Or you can follow these directions at sIFR Wiki. The Flash file used to create fonts is included in the “fonts/flash” folder.
How do I add fonts?
After fonts are created in Flash, upload them to the “fonts” directory in the plugin folder and they will show up here. Then you can activate and manage the font settings.
What version of sIFR does this use?
WP sIFR uses the latest nightly which is v3 r436. Fonts created for sIFR v2.x will most likely not work.
Can I add multiple selectors to the same font?
You can enter more than one selector, just seperate them with a comma.
The only issue with entering multiple selctors is that they will use the same styles. Sometimes this ok, but other times, it can be limiting. For instance, your “h1, h2, h3″ tags, if listed on the same font, would all *have* to be the same size even though you usually would want the size to decrease through the headline tags.
I have multiple selectors on the same font, but how do I style them separately?
Short Answer: You can’t.
Although we are working on a system to allow you to add selectors under a font that can then be styled separately.
Long Answer (hack): The work-around currently is to create a copy of the font file with a different name. Then you could style a second selector for that font separately.
For example: Take a file named “futura.swf”, make a copy named “futura_h1.swf”. This would allow you to use separate selectors, styled differently. This is a complete hack though and causes the same font to have to be downloaded twice.
The next major version should have the new system in place.
@sascha. I haven’t tested it in safari 4 yet. That code means the text that is being replaced is hidden. This prevents the regular text from loading and getting replaced by sIFR text.
So yeah, the “normal font” gets replaced.
Thanks to Mark Wubben, the current developer of sIFR, we now know that the strange Firefox/Mac issue is being caused by Adblock. Once completely disabled (in Firefox, not just on the site), everything is fine. Adblock conflicts pretty badly with Flash in Firefox 3 on Macs.
EDIT: 0.6.5 has a small work around that should fix this problem in most instances, but shouldn’t break anything extra.
Sorry for all of the updates. Just working through new issues. We will try to get .7 out soon with some major upgrades, and then calm down for a bit.
Thanks for all the feedback!
Once again great plug-in. I have found a few fonts that don’t work so far. I frustrated myself with one for about two hours, then tried another and it worked fine. Not sure if it was corrupted in conversion to flash or what is going on, but you might tell folks to try a few before giving up.
Good idea @rgregory. Thanks. I added something.
Hi, sounds like you’re working very hard on this plug-in, so thanks for your efforts. I’m having problems though - my fonts aren’t changing. Looking at the source code, it’s filled with backslashes. Have tried it in Safari and Firefox 3 Mac (no Adblock). I’ve also tried using the supplied default fonts to see whether it was a problem with my swf files, but no luck
thank you for this
[...] 4. WP sIFR wordpress plugin for custom fonts [...]
works like a charm - rock on guys!
It’s possible to add a drop shadow to a sIFR font, no? How can I do this with the plugin?
@Jan. Use the “Advanced Settings” field. You can either add this code in one line like so:
filters: { DropShadow: { knockout:false, distance:2, blurX:2, blurY:2, color:’#000000′, strength:.15, angle:90 } }
or upgrade to 0.6.7 and add then you will be able to use multiple lines:
filters: { DropShadow: { knockout: false, distance: 2, blurX: 2, blurY: 2, color: '#000000', strength: .15, angle: 90 } }Awesome. Works well. Just needed to add a comma between that and the ‘transparent’ property.
Next question - is there a way to, say, apply a drop shadow like that whilst hovering over a link?
Hey, be careful: the ‘filters’ work only in Internet Explorer.
Seems to work fine in Firefox, Safari 3, and Chrome.
@DoZ. No. These are sIFR filters, so they are cross browser, flash-based. You can see usage of the drop shadow filter in the header of this site (Jupitercow Labs).
oh well…
;P
Hey, I’m having some trouble upgrading from 0.6 …
After upgrade it doesn’t work!
Fortunately I’ve saved 0.6 version…
Are you using 0.6.7? That is the latest. 0.6.4 & 0.6.5 had problems on some servers.
Great plugin! I love that I can manipulate more than just the H tags.
Newbie question - I’ve successful applied a font to a theme defined object, namely “logo”, on http://www.trueglimpse.com to the header. Unfortunately, after the sIFR-replaced is enabled, the new font takes up the whole width of the screen (left aligning the text) and does not center like the original headline object it is replacing. I’ve messed around with the sIFR.css and tried setting the width a few places but that did not do anything. I’m not that great at CSS or .js, but maybe someone can tell me how to set the attributes of the sIFR-replaced object. I’m thinking if I just change the width down to like 350 px, the header text will be centered.
@alohanewmedia. Can you just use:
text-align:center;
I am using that in the header here. If you want it to be left-aligned, but to line up with the left edge of the content area, you could update the logo in your stylesheet to look like this:
#logo { padding:30px 0 0 0; text-align:center; width:660px; margin:0 auto; }Perfect, that did the trick! Thanks Jake! I should have tried setting the width in the original object! It looks great now, wp-sIFR is much more versatile than the WP font burner plugin which seems to only work with H tags.
Font Burner seems like a nice idea, because it is really simple. But I don’t like it. You are reliant on their servers and their availability. And it is generally limiting.
This plugin puts everything in your hands. So there is a little more required, but at least you are in control…
Hi
I seem to be having a bit of a problem with my installation of this. It is replacing my H2s and my #topnav li a and it is using my font. However it is not pulling through the text: It just says “replaced by sifr” and it is still in black and massive dispite me changing the css to small and brown
Can you help me? I am stumped.
Thanks.
PS. I have had to revert back to using custom fonts because the site is live
So sorry I can’t keep the example up.
I was being dumb, I was using the wrong swf file to call the font. It wasn’t the one that I made with the sifr generator.
I have a quick question, I want to overlay the sIFR text on an image, so I can make a resizeable banner, any ideas on how to approach this??
Fantastic plugin BTW
@Darren. You should be able to do that.
Say you have html output like this:
You could add a background image to the div#header and then use sIFR to replace the div#header span. I haven’t tested it, but it should work, so let me know.
@Jake. Excellent, I’ll give this a go tonight (I’m in the UK) and let you know how I get on.
@Jake, that worded a treat, one thing I noticed though, if I specify font size in EMs, as opposed to PX, int eh SETTINGS > CSS, the plugin ignores this?
Have I stumbled upon a bug
Thanks much for this plugin. I’ve been able to make it work for the most part but I’m having some difficulty styling.
The site I’m working on has a navigation bar that displays a list of subpages of a page and would like to replace the H3 in the list.
If I replace div#nav li h3 a, it will be placed the way it was styled before BUT the links will no longer work like links. No active or hover.
If I replace div#nav h3 or div#nav li h3 the links work fine but they display one below the other, not next to each other even though list-style:none;
I’ve tried a looot of different things. Am I missing something simple? Please help.
@Judy Sorry to Jump in, have you tried floating your elements to the left, you may also need to display them inline. Hope the formatting works…
Questions specific to sIFR and not to how the plugin helps sIFR work are better suited to the sIFR question forum at Stack Overflow. I do what I can, but there is definitely more knowledge about sIFR there.
@Judy. Replacing an “a” link tag is generally bad. It will break the link, because it needs to see the actual “a” tag to know to create a link, but if you replace inside the “a” tag, it doesn’t get the chance.
I would imagine that you just need to float the “li” elements. I have tested that, and it definitely can work.
Hey Jake,
Many thanks for this plugin. It works so well!
I have one question I’m hoping you can help with…I notice the spacing between two lines of text is pretty big.
I’m looking to reduce this spacing.
The CSS that is already present in the “Settings” field - I added a “line-height” property to this in the hope it would reduce this spacing but it had no effect.
I’d appreciate if you could shed some light on this for me.
Thanks you again for the plugin.
@Porg. Make sure to use EMs for your line-height property. I had problems when I was using PXs and then switched to EMs, and it worked.
Hey Jamke,
Thanks for the response. Unfortunately, I had already tried this and it didn’t have any effect:
.sIFR-root { font-size:40px; font-weight:normal; color:#000000; line-height:0.1em;} a { text-decoration:none; color:#000000; line-height:0.1em;} a:hover { color:#CCCCCC; line-height:0.1em;}I tried it on each and then all, as above. It has 0 effect on the flash.
I had a similar problem with the CSS too
[...] about anything. So this time I am going to try to keep it simple. I used a sIFR Generator and a great Wordpress plugin to decorate my header text…that’s it for now. This was written by front. Posted on [...]
This works beautifully — so much easier than installing sIFR from scratch, and it handles accented characters, which most of the PHP image generator plugins do not. Lovely work!
I’m having one puzzling problem: about half my headings are being displayed on several lines because the object tag has an arbitrarily short width. I’m baffled as to where it’s getting its dimensions. Does this sound like a plugin problem or a general sIFR thing?
I have not had much luck with line-heights. They appear pretty easy to expand, but really limited when it comes to shrinking them.
@Stephanie. I can’t really speak to your issue without knowing more. I would definitely call it a sIFR issue, but I would need to see it. One thing you might try is adding “forceSingleLine: true” to the “Advanced Settings” section. But it will make all the elements associated with that selector into one line which might not be ideal for you either…
Not that I’m totally impressed, but this is more than I expected when I stumpled upon a link on SU telling that the info here is quite decent. Thanks.
I am using this plugin on a new site - I love how easy it was to setup. I have an issue though, I am using a static front page, and when I first navigate to the site the SIFR replaces the fonts, but don’t show up until I navigate to another page. Any help would be appreciated!
What browser are you looking at it in? and I can’t really do anything without a link. You can use the contact form if you don’t want to post the link.
I tried turning off static front page, and used IE6 and FF3 with no result. Talk about strange! Thanks for the quick reply!
I see the problem. I just need to figure out why it is doing it. On the home page, it is referencing the swf file with a really strange path, on the rest of the pages, it is correct. I am looking into where it would get such a warped path.
If I change the static homepage, the new page has the faulty behaviour - if that helps narrow it down.
I’ve been looking all over to figure out how to disable sIFR if Adblock is detected just as you have. Is it in the JS? I want to modify my stock sIFR3 files so this happens. Any insight?
Flawless install, thanks! This is a really great idea.
Has there been any documented trouble styling sifr font color with CSS? I’ve used all the selectors and can’t get the font to display white.
Hey thanks for the great plugin!
It’s giving me a bit of trouble though… In a specific case on my page template, the sifr is displays above my drop down menu and it looks bad.
I tried using z-index on the elements but with no success.
http://greenbeta.ciplex.ws/wordpress/lighting-products
Any ideas?
Actually this should be pretty simple. Flash tends to do that on a page unless you set wmode to “transparent”, the default for flash is “opaque”. The default for WP sIFR is “transparent”, but that setting (under “Advanced Settings”) appears to have been deleted from only that one headline (arialroundedmtbold2) which is being applied to “#content h2″. So go into your WP sIFR settings, and click on “Advanced Settings” for arialroundedmtbold2 and add:
wmode: ‘transparent’
Let me know if you have any other problems.
will render fine in firefox on pc - however ie 6 & 7 it will not replace text. any ideas?
great plugin!
@Jack. This site is using WP sIFR, do you see any problems in IE 6/7 when you view it (The top header “Jupitercow Labs”, post headings, and sidebar headings are replaced).
Can you send me a link to look at? You can use the contact form.