WP sIFR, Wordpress sIFR Plugin

Download

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

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

  1. Upload the ‘wp-sifr’ folder to the ‘/wp-content/plugins/’ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Add fonts (SWF files) to the fonts folder
  4. 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

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… ?

  1. Does your template have a <?php wp_head(); ?> in the ‘header.php’ file? That one is important.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

201 Responses to “WP sIFR, Wordpress sIFR Plugin”

  1. amanda brown says:

    When I activate the plug in, I have quite a bit of padding underneath my post titles. I am not able to find the code to adjust the padding. Help?

  2. Wow! I was wondering if there was some sort of sIFR plugin for wordpress. I’m glad to see there is and want to use this on my site as well!

  3. Blake Wheeler says:

    I have this coding in my .css

    		.header .menu ul.list li a {
    			font: bold 24px 'Lucida Sans';
    			color: #FFFFFF;
    			line-height: 30px;
    			padding: 0px 20px 0px 10px;
    			background: url('../images/001/menu_bg.png') repeat-x;
    			display: inline-block;
    		}
    
    			.header .menu ul.list li a:hover {
    				color: #c2c2c2;
    				background: transparent;
    			}

    However, I am not sure where to put the h2 tag that it’s defaulted to.

    Thanks!

  4. Nick says:

    Thanks for your job!
    Very good plugin, but there is some problem when to use together with WPML.
    There is bad path to the font

    
    
    		
    				
  5. cuma says:

    How do I replace to post ?

  6. Stefan says:

    Hi

    i get a black block on my site, when i’m on mac and safari

    http://www.vdkgdesign.com

    have i done anything stupied?

    cheers

  7. Jack says:

    First of all I want to say thanks for a great plugin! We love it!

    One question though. Is there a way I can set the path or something so that the font shows up on a secure page? When I go to the secure checkout page I get that message asking if I want to allow non-secure items on a secure page. If I say no…the font goes away. If I say yes…it works fine. The way I got around this with my images was to simply make the path to the images /images/imagename.jpg. The script source however calls the font via http instaed of https. Any ideas on how to make this work?

    Thanks again for the great code!

    Jack

  8. Capers says:

    Google need to ahve acquired facebook or twitter if they obtained the opportunity. Rather they slept on it usually we would currently contain a spam-free and quickly fb.com

Leave a Reply


Post code by wrapping it: [code] … [/code]