New Screencast: How to Use sIFR 3
* 10/9/2008 — 33 Comments *
sIFR (Scalable Inman Flash Replacement) is a technology that allows you to use any font you wish on your web pages. Long story short, it uses JavaScript to target certain text page elements and replace them with a block of Flash, which is the same text only rendered with a new font. This means you are free to use any font you wish in your designs instead of being limited to very small set of “safe” web fonts. sIFR degrades nicely for users without Flash and/or JavaScript, so no worries about that. This tutorial walks through the process of how to get it working on a webpage, from downloading it to creating your own custom font to getting it working live.
Quick note again, no screencasts for the next few weeks. I’ll be out traveling for a bit. They’ll be back later in October!
Loading ...
Thanks for the screencast and enjoy your travels ^_^
Really great screencast, Chris.
Thanks!
I have read about it before, but I haven’t try it yet. But I think this in not a good solution! I’d always prefer to use php to generate images dynamically. This would avoid users to have flash player installed or javascript enables on their browser. I think it’s time to try sIFR!
Thanks Chris!
Not to overly self-promote, but if anyone’s interested in using sIFR for a wordpress theme, check out an article I wrote on my blog.
Nice tutorial, but for those without Flash, here’s an easy to use free alternative : http://facelift.mawhorter.net/
I submitted my comment above a fraction to soon … forgot to mention this : http://www.sifrgenerator.com/
Nice tutorial. I actually discovered the design intellection article a few months ago and have been playing around with sIFR since.
You got me thinking when you mentioned not giving away your swf because of the dubious legality of it. Of course if you right click on the page in Firefox go to page info and then the media tab you can download the file from there! It had honestly never occurred to me until you talked about it in the vid. Wonder where that leaves us, legally speaking?
Chris Thanks for sharing your knowledge with us. I’ve been using sIFR but your videos always clear things up!
sIFR is something I’ve liked the look of for years now but never yet implemented.
Thanks for the screencast, it made the process seem so straightforward that I’m hoping to use sIFR within my own site in an upcoming rebrand.
My 2 cents:
The argument about people not having flash or javascript is mute. If you are a good designer/developer like myself, you make sure that you design for the majority and degrade gracefully for the minority. The fact is that most people have flash, and don’t turn off javascript. For the select few that don’t have flash, or turn off javascript, then they will still get a decent site, it will just not be the ‘A’ grade. In these every changing times, you have to be willing to make your sites more dynamic and perform at different levels of enhancement. You can NOT just stick with Black or White.
Good tutorial. Sifr is definitely a little tricky to use and it helps to have good instructions to follow. For those who don’t have Flash or are looking for an easier way to implement sifr, I encourage you to take a look at Font Burner. (http://www.fontburner.com) There are currently over 1000 fonts that you can choose from, and implementing it on your site is just a matter of copying and pasting.
Hey Chris,
Everyone’s covered how useful this screencast is, so I won’t repeat that. I just wanted to comment on the screencast technology.
A - Love the little camera in the corner! As an editor, I wonder if it’s possible to sync it better to the screencast’s audio - the camera’s delayed. Can you place a 400-600ms delay on the screen dump and audio? That would fix that up nicely, I think.
B - I don’t know about anyone else, but the green circles that notify the viewer of clicks are really distracting to me. Maybe if they were a closer color to the background, like #ccc, but as green - I’m constantly distracted by it (in a bad way). Then again, I’m probably just being ADD…
Thanks again for a great screencast!
@Schoon: Oh yeah, I can’t believe nobody mentioned that stuff yet. Yeah not sure what’s up with the off-sync stuff, I’ll try to sort that out. And yeah I HATE the green circles, very distracting and not very useful I don’t think. I couldn’t find the setting to turn if off, so I hope that exists or I’ll have to go back to the old version.
Great screencast!
Some remarks:
Regarding sIFR not working locally, sIFR requires communication between Flash and JavaScript. When you use sIFR locally, Flash throws warnings regarding this communication, or block it. To prevent user confusion, I’ve prevented sIFR from activating when loaded from the file system.
Regarding SWF legality, I think you’re allowed to embed a font in a Flash movie. sIFR lets you add some hurdles to make it harder to use a SWF you create on different servers, but you cannot prevent the glyphs inside the Flash file to be copied to another Flash file. That said, Flash embedding is an old practice by now, and I personally haven’t heard of any issues. Of course, I’m not a lawyer etc.
Every font style you add increases the size of the Flash movie. Therefore, don’t add styles you don’t use. You can actually use multiple fonts within sIFR, but you have to specify the
font-familyin thesIFR.replace()CSS.I don’t think JPEG quality has an effect, since sIFR uses font glyphs, which aren’t stored as JPEG.
Flash transparency is a bad idea. It hurts performance, doesn’t work on Linux, and has several browser issues. Try not to use any
wmodesetting, if you run into drop down issues, usewmode: 'opaque'oropaque: true. Only if you truly need transparency, usetransparent: true(orwmode: 'transparent').You’re missing the part where you actually write some CSS in the HTML, which helps hide the HTML text before replacing. These are the
.sIFR-activestyles. And even though you can specify a fixed font size, sIFR works a bit nicer if you let it derive the font size from the existing CSS, again through the.sIFR-activestyles.On some sites sfir really slows the site down. I like to use this php-only script. It’s very flexible and easy to use: http://www.joaomak.net/util/dtr/
Is it possible to have text in two sizes on the same line with sIFR?
I tried it using a span class but it didn’t work.
@Mark: Thanks for stopping in and clarifying those points for us!
Steven, yes that’s possible, but for some reason you can’t use ’span’ as a selector. Give the <span> a class name and use just the class name as a selector.
Chris, sure thing!
Thanks for the screencast. I did not know much about this feature but heard all the buzz. The screencast made it clear and easy!
Great screencast Chris. I have used sIFR3 on a site earlier this year and I agree that it adds some weight to it. In fact, sIFR loaded with a slight delay on the page - so you would see the inline text first, which would then turn into the flash font a second later. That was a bit annoying… I’m sure it was also not only because of sIFR, but because the site was already not the leanest. So I’d say, it is as it always is: weighing design vs. accessibility. The stone-old predicament that every web designer faces.
I also have to say, this new version of the screencasting software you’re using is great, EXCEPT for those really, really erm… “nice” mouse click indicators… I don’t know what they thought there. The circles distract from everything else on the screen, it’s really hard to follow with that feature on.
Otherwise, as always, great work. Thanks!
@Robert: Go check out the #6 section of the Design Intellection article, which covers the “flash” you are talking about.
Sorry about those mouse clicks too, those were really awful and I’m gonna try to figure out some way to turn them off.
Chris - OK! See, I used the exact same article when setting it up in the first place. But somehow, that part escaped me
Thanks for pointing it out!
great screen cast. I wish the ’standard’ font set were expanded though so as that different fonts could be supported in a less hacky way
Thanks for this– very easy way to walk through sIRF (for the first time implementing it myself).
I had a weird issue where I wasn’t seeing anything really happen in my html file. I noticed on DesignIntellection that he recommended to a couple people to take out the tabs when nothing else looked wrong in the syntax. I had already recopied/pasted the config file, triplechecked for stupid typos on my part & finally ended up just typing the config file from scratch (exactly as it was just no extra spaces or tabs) & had success. In case anyone else has a similar situation where everything looks right, I would just recommend starting fresh. : )
He great screen cast, I had a sifr tutorial bookmarked that I never got around to reading, look forward to playing around with this this technology.
Anyone have trouble with SIFR in opera. I implemented it on a site recently and the sifr was rendered it was just tiny. I used it in h1, h2, and h3 and the h3 rendered correctly but the h1 and h2 which should have been larger were too small to even read.
Phil,
I had a problem getting sIFR to work with Opera at all until I updated to the newest version (9.62). Before that, it simply didn’t render. Maybe updating will help with your issue too if you’ve got an older version.
What I also encountered while working with sIFR were such little things as having to use px for font-size (it won’t take em), and placing the lowest child in a hierarchy (and pseudo attributes) above its parent (e.g. “a:hover” BEFORE “a”). Maybe Opera is more sensitive to some of these issues?
I also wouldn’t put too much effort into downwards compatibility with Opera, since it only occupies a fragment of the market. We’ve got enough hacking to do for IE already, and I would also say that Opera users are more savvy than the average IE user, thus more likely to use the newest version.
Awesome tutorial, it was very helpful. I managed to get sIFR to work in Firefox and Safari but I’m not having any luck with IE. Can anyone please help me with this?