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.
Hi Jake
Yeah i notice your is working.
So strange can’t figure it out…sent you a link twice. Any ideas?
This is driving me mad trying to figure it out!
Thanks
Jack
I managed to get a “replacement” for wp_list_categories that adds SPAN tags around the text of the list items.
And it works, even got the hover to work.
Now all I need is the possibility to get the active category to display in a different category. The code is like this
Help
Sorry, the code is all messed up.
Should be
Menu Item
Hello Jake!
Thanks for your plugin, it’s very helpful.
Now I’ve got a bug, wenn I want to use ä,ü or ö.
This letters won’t be display. Can anyone help me?
Greeting from Germany
@Adrian … your font needs to have these characters embedded. If you’re using the included default font, chances are that they only include the standard character set.
There’s a link in the plugin that will let you upload your font and create a sIFR font file from any TTF font file.
Make sure to choose the “include all characters” option, otherwise our Deutsche Sonderzeichen are excluded
Hello, I am loving the simplicity of this plugin.
However, whilst the text gets sIFR’s in FF, doesn’t in my IE7 !?
Have you experienced this problem in the past?
Thanks, Will.
Hey Will
I am experiencing the exact same issue.
Still trying to figure it out. Let’s compare notes and see what we are doing similar which could be the cause!
Any thoughts Jake?
Well I don’t think I am doing anything out of the ordinary..
• I am trying to sIFR h2 tags on my site
• In my header I have a recent copy of jquery and also jquery-ui-1.7.1.custom.min.js which is there for other effects on the site.
• wp_head is sitting just before
• I have other plugons installed: breadcrumb NAV XT, cforms, magic page list, my custom widget, pageMash, PHP exec, send-to-a-friend, WP Tabs And Slides, WP Unformatted
- You have any of those?
Can’t think what else it can be. Have tried on another machine’s IE7 so I don’t think it’s anything specific to my version.
@JAKE
Ok I think I got it.
I copied the code produced from wp_head(), commented out wp_head and played around with code it produced. I deleted the trailing comma on:
sIFR.replace(angelina, { selector: "h2", css: [ '.sIFR-root { font-size:26px; font-weight:normal; color:#666666;}' ], });(line 5)
@Jack. Really sorry I have been so distant. Really bad time.
@Will. that fixed it for you? Interesting. You can avoid that issue by making sure you have a wmode setting in your advanced settings, but i will be sure to fix that in the next release which i hope will be soon.
Yes it did so have take it out of the plugin for now.
Are you having this problem on any id / class or just h tags?
Ahh ok Will i see what you did there.
Jake: I’ve looked into it a bit further and found out that one of the 4 tags i was using didn’t have default advanced settings for wmode:transparent.
it appears to be working in ie 7! haven’t been able to test in ie6 but i am hoping thats it!
Hi there,
I love this plug-in. I have no problems using it. But there is one single issue: I use sIFR for my blockquotes. For some reason it creates a break in some of my quotes. It is always between the second and third line. I checked the HTML and there is absolutely nothing there to cause it. The code is clean.
Any ideas?
Example
I tested the blockquote issue: It seems, that each tag with a
is making a wrong break one line above the correct line, instead of the real break.
I am not sure what the issue is, but some places to start:
The code is entered incorrectly, the closing curly bracket (”}”) is on a newline, so javascript is getting formated incorrectly.
From there you could look at trying to set the leading and see if that changes things
.sIFR-root {leading: -2;}Thanks for your response.
I tried to fix the bracket, but nothing.
Also I set up a leading (both + and -), but it helped nothing, too.
The issue is, that there is a wrong break between the lines. Those wrong brakes (”p”) are always one line above the real brakes. The real ones don’t create any brakes instead.
Strange, isn’t it?
I’d the same problem and got it resolved by giving the elements: letter-spacing
Hi
Doesn anyone know of any ways to speed up the sIFR replacement a little? I am finding the page loads and the sIFR heading doesn’t render until a couple of seconds after the page loads?
i.e. script prioritisation / position
Thanks, Will.
Check your font file sizes. I am using 4 fonts with around 32k each and replacement is instantaneous - the user does not see the “original” text and just a hint of the empty space before the fonts are inserted.
Im using 1 font (40.6KB), I don’t see the original text but whitespace for a bit then the page nudges slightly as the sIFR text displays.
Okay, I just implemented it on another site and here it’s a lot slower, but still barely visible. No nudging though.
I would assume that since the replacement takes place only when the site has finished loading that it may be other elements that make loading your page take longer than normal.
Yeah I guess. The nudging probably occurs because the height of the flash text is different to the original text. Could probably be controlled with a container and some css.
I do have several other plugins, a couple of which add js in the head which all probably slow the process down a little. It’s just fine tuning things I suppose! I have wp_super_cache installed which does help quite a bit with page loading times.
Any news on how to highlight a certain list item when using sIFR and wp_list_pages or wp_list_categories?
Hi - fantastic plugin, I was using Flashytitles before and this is so much simpler.
I have hit a problem in IE6, though, on a site I’m building for a client. I have two selectors specified for the font, like this:
The Flash doesn’t display for either, which I can live with - serves people right for using IE6! However, the original HTML text is only shown for the first selector, not the second which appears as a blank space on the page. If I swap the two selectors around, the behaviour is also reversed - the new first one serves up HTML text and the new second one shows nothing.
Is this something you’ve come across before? The Flash displays perfectly on XP in Safari, Opera, Chrome, IE7 and Firefox 3, it’s just IE6 that complains.
Can’t say for sure. If you could send me a link, I would be happy to take a look and see if I can help figure it out. You can use the contact page.
I can’t, I’m sorry - I’ve used your suggested work-around as the site is all-but ready to go.
But I’m going to add the plugin to my own personal site and will try to reproduce the behaviour there. If I can, I’ll send you a link.
Thanks for supporting this plug-in so well!
Hi. The plugin works perfect. Great job!!!
But the strange thing is that the system slows totally down after installing. Site is quick shown but sIFR really needs some time to be shown…. Do you have any idea how to improve it?
Thx
That is a tough one. sIFR can be slow. The first thing to look at, though, is the file size of the fonts you are using. More complex fonts make larger files, and they can get really big and really bog things down. Also if you know exactly how you are going to be using a font and can leave out the italic version or the bold-italic or any version that isn’t being used, you can greatly reduce file size. If you are only going to be using bold, only include bold.
How much text on page is being replaced affects things along with how many fonts are being used.
And from there, a site’s server can really affect things.
Thx Jake for the support. I’ll try it with less characters in the file. But the problem is that I use it for three languages incl. spanish. But I’ll try
Gotcha. Perhaps if you can try it slimmed down, you can at least see if there is a difference. If there isn’t then you will know it isn’t the probllem. Of course… if there is, then you will know it is…
Knowing is half the battle…
Is the site picking a language based on user? or are three different languages used throughout the site for everyone?
Love the plugin. I’m having issues with hover/active links. The active state of the links upon hovering the mouse seems to randomly disappear and reappear. I see this problem in Firefox, Opera, and Safari. IE6 and IE7 work fine. I’m using WordPress 2.7 and WP sIFR 0.6.8.1. Any help would be appreciated!
Just to be sure, don’t apply sIFR directly to links, it ends badly. Make sure to apply sIFR to some kind of wrapper. Like an h2 or even a span. Beyond that, i would need a link (you can post or use the contact form) to take a look.
The CSS selector in question is h2.entry-title. Actually, I’ve entered a string of three selectors for that particular replacement font (fontinregular): h2.entry-title, tr.gigpress-header th, and #page-top h3. The sIFR root styles applied are .sIFR-root { font-size:20px; color:#FFAB3E; line-height:24px}, a {text-decoration:none; color:#FFAB3E; }, a:hover {text-decoration:underline;color:#bcbcbc; }. You can take a look at killthevultures.com/wordpress/blog to see the problem. Thanks for your help!
Since my previous post, I have moved the site to the root level of the domain. To see the problem look at http://killthevultures.com/blog
I am stumped by this currently. I have a feeling this is an issue with sIFR, I could be wrong, but you might want to try asking the sIFR community and see if anyone has had a similar problem.
Try them at Stack Overflow. If you don’t get anywhere, let me know. I would love to know what is going on there.
http://stackoverflow.com/questions/tagged/sifr
Really nice plugin. I never used sIFR before but with this plugin is really easy. I noticed one issue. I replaced title “H2″ which is link as well. But I have to click twice to activate link. When I move cursor over H2 title it’s remain as arrow (doesn’t changed to hand). I have to click once to “highlight” it ((cursor changed to hand) and then click again to follow link. I tried it on FF, IE and Opera but only FF has such problem.
Send me a link if you can (and are still having the problem). I would like to take a look. You can post it here, or use the contact forms in the sidbar.
I’m using your plugin on my site now, but the top of the font is cut off. Do you know of a way I can add offsetTop top push it back down?
Devlin.
These little gems in the advanced settings are extremely useful:
tuneHeight / tuneWidth and offsetTop / offsetLeft
In your case. Add a new line of “offsetTop=5″, and tweak the number.
(add a comma to the end of the previous line if one exists)
hi!
it doesn’t work, for me at least.
when I add the second line, the plugin stops working!
Hi Ale you need to write it like so:
wmode: ‘opaque’,
offsetTop:’5′
With the single quotes around the number of pxls you want offset.
I am in the midst of building, so please excuse my obviously incomplete site.
When I increase the font size (75px for instance) my text is split between two lines though there is room in the div for it to stay on one. Can you give me any advice?
Thanks in advance,
Geoff
Hmmmmm — re previous message: Only on Firefox 3, not IE8 nor Chrome 2. I’m stumped.
Not sure offhand. You could use tuneWidth to make sure it has more room.
Is the padding being set for all browsers to make up for differences in browser defaults?
You could also use forceSingleLine: true in the advanced settings to force it onto one line.
I am having difficulty with the post sIFR not wrapping. Without sIFR applied the text wraps over three lines. when I apply the WP_sIFR plug-in, it converts to the font I am after, but it only produces the first line of copy. How can I fix this?
Cheers in advance. Jason.
Hard to get a feel without a link. Perhaps try adding tuneHeight and increasing the height by a lot to see if you can see the text.
Did you fix already?
[...] WP Sifr is the best solution to use ANY fonts on your Wordpress. Get it! details and download [...]
Hi Jake,
now that Wordpress 2.8 is official out.. I wonder if your plugin works with Wordpress 2.8? If it doesn’t, I do hope you could come out with a new version which supports it.. And also, just to add.. Your plugin is awesome and I simple can’t live without it even after upgrading my Wordpress to 2.8
Thanks mate for this awesome plugin
Regards,
Krizalis
My sIFR works fine, all my CSS properties work nice but only “line-height” doesn’t seems to work. It tried almost everthing: px, em, %, pt, etc. Does anyone has an idea whats wrong?
See if there is anything useful here:
http://discuss.joyent.com/viewtopic.php?id=3679
Try using leading in the .sIFR-root css.
Let me know.
Try to use a “height” also
so, does sIFR work on 2.8? I too love it but have a new site running 2.8 and didn’t know if it worked with 2.8 or not yet.
Thanks for an awesome plugin!
Not sure yet. I haven’t been able to test. I will hopefully be testing this weekend though.
Jake,
So I was wandering something. In an implementation of using wordpress at a different blog address from the site address, there is a problem with the font url’s, they all have something like this prepended to the beginning “../../../”
So a font url looks like this “../../../http:host.com/path/to/font”
I took a look at the “header.php” file and noticed a variable $backtrack which you call the function wp_sifr_url_backtrack()
I removed this and it works fine.
My simple question is, what is this for, and why is it needed?
It creates relative URLs depending on the current pages URL. On some servers, there were problems accessing the fonts with absolute urls, so I put that in place to be more universal. I am evaluating the need for that in the next version actually.
Not to tell you how to write this plugin because I didn’t write it, but just throwing out a helping opinion here.
I would definitely take it out, because if this is an issue with absolute URLs, I don’t think it’s a path problem, but a flash problem. Or a user settings problem.
There may need to be some sort of a crossdomain file, or configuration changed.
I know it’s hard to prepare for every installation and situation, which is why you usually just prepare to let the user do what they need to.
So for my recommendation:
I would treat fonts similarly to media attachments.
Have you ever tried out this plugin?
http://wordpress.org/extend/plugins/download-monitor/installation/
Mike Jolley treats downloads similarly as attachments, allowing uploads to the wordpress uploads folder, but they stay separate from the wordpress media, which I don’t know if I’m convinced is a good or a bad thing yet.
All in all, if there could be some sort of control on where the fonts go, that would be great.
Another point is, if you think this backtrack is absolutely necessary, there should at least be a check to see if the path is already an absolute url. I am just trying to wrap my head around how this could have happened:
“../../../http://host.com/wp-content/path/to/font”
I can try and help if you would like.
Jim
I am also running 2.8
Everything was working fine until I change the Blog Address to be different than the Wordpress Adress.
[...] It is the best solution to use ANY fonts on your Wordpress. Get it! details and download [...]
Thank you so much for this plugin! I was going crazy trying to get sIFR working and then found your plugin and it worked like a charm. Thanks!!
Thanks very much for this plugin, donation coming shortly.
Don’t know if it’s been covered, but I wanted to add a little extra help those experiencing problems in FF with no flash text appearing at all - if you have a Firebug console running I have found the sIFR text can disappear. Try switching it off and refreshing the page.
Currently enjoying your plugin with a 1px white shadow for an embossed look. Awesome, no more graphic buttons!
I can not get the tuneWidth to work at all.
In my fonts Advanced Settings field I have:
wmode: ‘transparent’,
tuneWidth: -265
As I understand it, the width of the flash movie will be lessened by 265 pixels (it is currently 640 and I would like it to be 375).
Am I missing something?
Hard to say for sure, especially without looking at it, but things like tuneWidth are a last resort for when CSS doesn’t take you far enough. Be sure to set the width in your stylesheets, and then sometimes the tune values are needed to fill in when you can’t get it quite right.
Using Firebug I have modified all the styles - they are working correctly. It is the width attribute of the flash object that I am unable to modify.
thoughts?
Thanks for the great plugin.
I have it working for my navigation but can’t figure out how to make it horizontal. Any ideas?
thank you
depending on how you built your nav… set your display:inline
this may be the same issue that I am seeing tho.
-j
Hi, there, and thanks for a great plug-in. I am having a little trouble, though. On this site:
http://www.naturallycarolicious.com
In IE and Safari on my iPhone, nothing is showing up for sidebar titles when the Flash titles are not displayed. When I deactivate the font in the wp-sifr settings, the sidebar titles show up. The sidebar titles are in the same part of the stylesheet as the post titles so there’s no difference there. Any idea why they show up in one place and not the other? In Firefox, they all show up even if the font is deactivated, but in IE6 and Safari on my iPhone, when the font is activated and it should be displaying the default CSS instead of the Flash replacement, nothing shows for the sidebar titles.
Thanks for any help you can give…
Since that is most likely related to sIFR itself, you might want to try asking over at StackOverflow. I am not sure off-hand…
Thanks, I’ll try posting over there!
great plugin. thanks a lot for your work!
hey
sorry for the possibly silly question, but i have no idea how to get the plug-in to work. i installed it, added my .swf and then i’m stuck.
do i need to add code to the css-file? where, how?
address of my css: http://www.gonzocircus.com/testsite/wp-content/themes/church-55550/church_40/style.css
It just stopped working…maybe because of a server move, in fact, that’s probably it, but I reuploaded the entire plug-in file set and it still doesn’t work…and I have no idea what about a server could keep it from working. Here’s the URL:
http://www.dancingbydesignstudio.com
Help? Please
…
Apparently it is only NOT working in Firefox and Flock…but is working in IE, Opera and Safari. However, I have another client site that I installed it on that is working in Firefox and Flock…but I have tried this site on two different machines so it isn’t a cache thing. Any ideas?
Got it…they had to whitelist me for some permission issue. It wasn’t a simple chmod of a folder, though, it was deeper. Anyway, problem solved, thanks again for a great plugin!
Hello nice plug in I love it. Having a problem with linked h tags though. the mouse over won’t turn into a hand when hovered on a sifr-erd link I tried :
a:hover { color:#1d5cd1; cursor:hand; } a:hover { color:#1d5cd1; cursor:default; } a:hover { color:#1d5cd1; cursor:auto; }but it seems not to work
my selector :
div#sidebar h2
my link:
blah blah
I know it should work as I’ve been using sifr on non wordpress sites and I have no problem with links.
Any ideas thanks.
Nah don’t bother I got it never should have spoken too soon:
.sIFR-root { cursor:pointer; }
Thank you for posting that Stone. It is what I needed.
@King Louie - This resolved my issue, which was the same as yours.
Thank you all! Great plugin! Beautiful work!
during some svn shenanigans I lost the custom css for each of the fonts - where are these stored so I can recover from a backup?
cheers!
The settings for WP Sifr are stored in the wp_options table. option_name = “wp-sifr”.
They are stored in an array under that one row. Hope that helps!
I am using WP-sIFR in my site, http://www.andychin.com/blog. Particularly in the post title. However, the render image only shows ONCE in the first post. subsequent post are not showing up. i can’t figure out why.
I am using WP-sIFR in my client site and it’s not working with IE8 … Is there something wrong with my setting ?
Hard to say for sure what is going on without seeing it, but it should work in IE8. You can view this site in IE8, and the header shows up fine for me.
I can’t get this to work with IE6 or IE7.
Try entering the URL of this page into http://ipinfo.info/netrenderer/index.php — you’ll see empty boxes where the titles should be. Same with my site.
[...] 11. WP sIFR [...]
I have found this plugin to be virtually indispensable for theme development, included this plugin in my article
I am having a but of a problem with my fonts getting clipped up top. See http://www.ensellitis.com/, the first post has a cap O in it, and a few pixels are getting chopped off the top. Any idea what is causing this?
Thanks so much for this plugin! I’ve used sIFR a bunch, but this is my first time using it through a WP plugin.
Is there any known issue of this plugin not being able to use the kerning and leading styling in .sIFR-root? I simply can’t get either of these properties to work through the Settings CSS. Is it just me? (And yes, I’m using intergers with no “px”, or “em”, etc…)
Hi,
First of all, great plugin!
My only issue is that after about 15 minutes, my links are no longer clickable.
Any ideas?
Cheers,
Julia