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.
Plugin doesn’t work.
Thanks for the heads up Craig. Turns out there was a problem that doesn’t allow the plugin to work in PHP 4, it was a pretty minor issue, so I am going to change it out to be more compatible. I don’t have a great test environment for PHP 4 currently, so if anyone else has trouble, let me know and I will try to address it as quickly as possible.
“Unable to update options”
plus: I don’t see any font in the option page despite I did upload them
(env.: php 5, reg.glob.:ON, url fopen:ON, curl:ON)
DoZ, Craig, anyone else.
There is an issue that if you activate without any fonts in the fonts folder, you can never add fonts again… Sorry, but it appears it was never tested without at least one font in the font folder upon activation.
This should be fixed in the next half hour. I will let you know and post the update.
THANKS for the feedback!
Sorry for the trouble. It was just an issue with how it handled updating and adding options. Fixed in 0.6. You can download it here: WP sIFR 0.6.
It will update in the Repository shortly.
Ooohhh yeah! That’s good!
You did a great thing! …even adding some sample font in the installation package.
Very very nice!! Compliments, BRAVO!
(you can see your plugin in action here: http://www.stem-cells-news.com )
I uploaded a new font and when I activated the new swf file I am getting the name of the font show up where the h1 tag should be… The site is in a test mode right now as it is still being built, so thought I would mention it so you could take a look. http://avalanchecheese.com.previewdns.com/?page_id=3
Liz.
It looks like your swf file was generated for sIFR 2 instead of 3. WP sIFR uses the latest nightly which is v3 r436. So the text replacement isn’t working. The flash is getting placed, but the text in the flash file is not being updated with the headline text, it is just showing the actual text that is in the file to start with.
You can see the flash file text here:
http://avalanchecheese.com.previewdns.com/wp-content/plugins/wp-sifr/fonts/gil.swf
“Gill Sans MT (Normal) - This sIFR v2.0.5 file was generated by sIFRGenerator.com”
So you can just go back to sIFR Generator, and make sure you select v3 r436 and you should be ok.
Let me know if you have anymore problems.
Can you enter two css hooks in the selector? If so, what is the syntax?
Great plugin by the way!
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. Where as, you usually would want the size to decrease through the headline tags.
We are working on a system to allow you to add selectors under a font that can then be styled separately. The work-around currently is to create a copy of the font file with a different name, and then you could style a second selector for that font separately.
For example, you could take a file named “futura.swf”, make a copy named “futura_h1.swf” and you then you could 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.
Thanks for the support!
This plugin works great and was an easy fix alternative to the sIFR wiki instructions (or lack thereof).
Thanks very much for the plugin—I don’t doubt I could have got sIFR working with WP myself, but why even bother when your plugin is available.
Can I also add my request for ability to define multiple selectors for a single font. I’d appreciate this so much I might even be moved to donate
I extend John’s request: multiple STYLES (size, colour, …) for the same font.
Works great in Safari 4. In firefox 3 the object tag isn’t even inserted….
It works great in Safari 4 even, but in Firefox 3 I don’t even get an tag. The JS file is loaded as well as the CSS. In firebug my tag isn’t edited edited at all, but in the styles applied field it seems to have gotten the .SIFR-active class attached.
I guess it should look like Header but only looks like this Header. Is it a bug?
Oh, it stripped off the HTML. Again:
I guess it should look like Header but only looks like this Header. Is it a bug?
Dang!
Screenshot:
http://dl.getdropbox.com/u/311090/Picture%202.png
The topics of each post shows up in Firefox, but does not show in IE? Anyone else have this problem? Look at my page.
To all the guys who are having trouble: I see the plugin working well even on IE6! I suggest you to check your environment first.
@Adrian, I am not sure what is happening. Can you describe? Is the original html showing up? Or are you getting blank areas where the sIFR should be?
@Mattias, I am not sure what you are referring to. “The topics of each post…” What do you mean by topics? When I look at your link, it seems like it is working.
Hmm, don’t really know the english word. Topic of each blogpost, the headline of my individual posts. The flash don’t show in IE, not at work (IE7) not at home (IE7). On Firefox it works. Jake, I can see you used Firefox when you visited my site( I use Woopra, http://www.woopra.com/). But maybe it’s something in my IE browsers. I don’t have any ad-blocking software though.
The original HTML shows, although the text in the H2 tag is hidden.
I noticed in safari 4 that a strange right padding of about 10px shows up on the entire page when sIFR is active. Can’t locate what object that has the styling or is to wide.
Strange. When I look at your site, it works in:
Windows: IE6, FF3, Chrome, Safari3
Mac: Safari
Doesn’t work on FF3 mac & IE7 windows
This site (jcow labs) is the exact same except it does work on IE7.
Also. After a long period and opening this site in a separate tab on IE7, when I went back to your site, the headlines showed up…
Also. opening all of those browsers at once was an amazing resource drain.
Adrian. I am noticing the same problem in FF3 Mac. So far, everything seems to work on everything, but Firefox 3 on the Mac. Pretty strange. The css is being loaded, but then the JS seems to be ignored…
“Also. opening all of those browsers at once was an amazing resource drain.”
Lol Jake.
Im not understanding you there Adrian, is there something I did wrong then if the text is hidden?
Im off for work, will look into this tomorrow.
Jake: the padding thing in Safari 4 was my fault, naturally
Thanks for the conclusion concerning FF3 on mac, I’ll continue watching the news about a bug fix or the like!
The plug-in works beautifully on other browsers. Good work.
I am working on the FF3/Mac issue as well. If nothing else, I am going to put out a short-term fix that at least doesn’t hide the headlines…
Just installed the plugin on my dev site under Wordpress 2.7.1. I’ve tried various fonts and tried pulling it up in different browsers (FF3, Safari - both on Mac). I click “activate” and type in h1, h2, h3, etc. but for some reason I’m not seeing the sIFR working.
You can see the dev site at:
http://www.rugglescreative.com/dev/
What am I doing wrong? Is there something I should check?
Brad. The js and css code is not being added to the <head> of your site.
Make sure that your site header.php has a < ?php wp_head() ?> in it.
Yes, I even switched to the Wordpress default theme to eliminate any theme issues. I checked and there is a in the header.php. Can I manually add the js and css code?
No. You can’t manually add the code, you would be able to add the basics, but the customized code that enables it to work with your settings is built dynamically.
I am seeing the code in your <head> area now. I am taking a look at it.
Can you try deactivating this font: “itcavantgardestd-bold”
And see if the “h1″ starts to work?
Yeah, I deactivated the itcavantgardestd-bold font and it works fine. When I re-activate it then it stops working. Any idea why that would be? I created it using the sIFR Generator link you gave at the top of this post.
Ok, I figured it out. I went back to the sIFR Generator and converted it using sIFR 3 r419 instead of sIFR 3 r436 and it seemed to work. Weird.
Oh wait, one more thing. Now I can see my sIFR font but all the headlines say “Please update the flash movie to version 436″. I’m assuming that has to do with the sIFR version but when I used the sIFR r436 it doesn’t work. Any ideas?
The font needs to be the latest sIFR 3 r436. My hunch was that the font had a dash in its filename. It appears that you might not be able to use fonts with dashes and spaces and any other special character that the javascript will misread. The next version will scrub this stuff automatically.
I am really sorry that it doesn’t do it on this one, but we hadn’t tested dashes. I will add it to the FAQ…
Yup, the dash in the font file name was the problem. Removed it and it works fine.
Hey, awesome plugin, saved me lots of strife. I tried adding the css value letter-spacing but it removed all spacing. How do i solve this?
Hey mate, thanks so much for a wicked plugin, makes it so much less of a headache.
one problem, it doesn’t load properly in Ie7 (there is a blank space where the sifr titles should be)…as soon as i move the scrollbar, they appear as they should (and do on every other browser)
I am using the kubrik2 (k2) theme, it works fine under kubrik so im guessing it is a theme related problem, but any ideas would be appreciated.
In case anyone has the above problem i found a solution:
you need to specifically set a ‘height’ property in your css file that contains the elements sifr will be operating on.
for example, say you are converting h2 and h3 tags to sifr, you need to make sure they have something like h3 { height:20px; } in your css file.
@Dan. Thanks for the heads up! Just to be sure, you need to specify the height in sIFR or in your template stylesheets?
@Everyone. We added a new version to “fix” the Firefox/Mac issue. It doesn’t really fix it… It detects if a user is on a Mac, using Firefox, and then doesn’t include the CSS & JS. Not ideal, but at least now the text is no longer hidden.
WP sIFR 0.6.1
Hello. Great plugin. I install and works OK with h2 tags. But I have a doubt: Why it shows list items with a little point before in li tag? I’ve tried to change some CSS, but i couldn’t remove them.
Works great, thank you
it did work… now it dosn´t anymore. Why is it not working..included on mac/firefox… so bottom line.. can´t use it??? or are you planning to fix that in the next days?
The WP plugin update function causes the deletion of custom installed fonts!
@Zef. letter-spacing: 2; works for me. I am not sure what the problem is.
@Jose M. sIFR is a bit limited at times. You can’t remove the bullets on lists in sIFR. So if sIFR is applied directly to a list element or two a selector that houses a list element, you can’t control it.
The only way around that is to apply sIFR to a selector inside of the list element. You could apply sIFR to a <span> tag for instance inside of the <li> tag.
This site, for example, applies sIFR to the <h2> tags in the sidebar that are part of a list.
@sascha. 0.6.1 does not work in Firefox on a Mac. I am reverting the WP Repository back to 0.6, but sIFR in general doesn’t work on some Macs using Firefox. We are trying to figure out why.
@DOZ. I am really sorry about that. We working on better management of settings, it is a high priority, and I highlighted it at the WP Repository.
cool. looking forward to it. You´re doing a great job…as you got the only sifr plugin that works! the “custom fonts” dosn´t
I was typing letter-spacing:2px; that’s why it wasn’t working. Awesome stuff, one lats question, is there anyway to stop the jump as sifr items load up? (the page has to get bigger so jumps)
@Zef. 0.6.4 was just released. It activates “sIFR.useStyleCheck = true;”, this is meant to help things load faster, but may only be marginally helpful. Unfortunately, sIFR can just be slow which can cause a bit of a jump.
Making sure your font files are as small as possible also helps. If you are not going to use bold or bold-italic, just leave them out.
…does the new version 0.6.4 also not work in safari 4 beta??? Man… I really hope there´s soon a cool update which work everywhere. does this mean that the swf is hidden:
.sIFR-active #featured .headline { visibility: hidden; } .sIFR-active h2 { visibility: hidden; }or just my “normal font”??