Sifr 2.0: A System For Embedding Non Web-safe Fonts Has anyone tried this?

[foolakadugie 0]

sIFR 2.0

an open source solution to rich typography for the web

 

I plan on trying this soon and just wanted to see if anyone else has had any experience with it. It looks like it could really come in handy.

I was going to try it out and experiment on a past job, but the coding of the website ended up being passed on to a web programmer.

Apparently it uses a combination of flash, javascript and CSS to embed non web-safe fonts into a web page while still making it appear

like a normal html page. What I mean is that the user should still be able to highlight and copy text etc. If the user does not have the flash

plugin or has java disabled it will just revert to the CSS styles using a web-safe font.

 

Go here to see sIFR in action: https://mikeindustries.com/blog/files/sifr/2.0/ (thanks .:Brian:.)

You can read more about it at: https://mikeindustries.com/sifr and http://forums.xisto.com/no_longer_exists/

 

Here is a description from https://mikeindustries.com/sifr

 

How it works

 

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

 

1. A normal (X)HTML page is loaded into the browser.

2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.

3. If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".

4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.

5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

 

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.

Here is some more info from http://forums.xisto.com/no_longer_exists/

* sIFR does not require any changes to the (X)HTML code, all the work is done by Javascript, Flash and CSS.

* If the user does not have Flash installed or Javascript enabled then the (X)HTML text is displayed and styled by CSS.

* sIFR is scalable, and when rendered will adjust to the users font size settings.

* sIFR is compatible with all screen readers. No problems or issues have ever been reported.

* sIFR text is selectable with the mouse, although visual confirmation of the selection may be absent when selected with body text.

* sIFR does not affect search engine placement or ranking, nor does it hide textual content from search engines or users.

 

The conclusion should be that sIFR is an accessible, mature technology, and that its use must be given serious consideration by designers and developers.

Edited March 2, 2007 by foolakadugie (see edit history)

[.:Brian:. 0]

Wow, i like the idea of this.

I have often wanted to put some strange font on my site for some reason or another (usually a heading of some sort), and I can't stand when I have to use images for that sort of thing.

The idea of being able to use this for displaying the stuff is nice.

Also, after looking at the page, they do have an example page: https://mikeindustries.com/blog/files/sifr/2.0/

So you may want to have a look at it (it looks really nice).

I am not sure if I want to use this or not though, just because I have gotten my site set up, and it looks perfectly fine with standard fonts. But maybe the next time my site gets re-designed? Or maybe some other website?

[Markymark2 0]

I must say I am VERY impressed by this!! The graphic designer I work with is going to have a mental breakdown over this ;)I am forever telling him to STOP using his thousands of fancy of fancy fonts on stuff that we build..maybe now I can offer a comprimise ;)Thanks a lot for posting this up!!Marky;)

[Punkcat 0]

I'm definitely going to try this out! I'm so sick of the same fonts for all the web, and if you want to add a not-so-common-but-great font, you have to make a big image, which increases loading times, and I usually leave it out...Now perhaps we can work with more freedom in design. I'll post here what comes out from this.

[foolakadugie 0]

Yeah I will play with it soon and I would be interested in seeing anyone else's results with it.
The same old fonts really can get old after a while and it seems like it would definitely make things
easier with fancy headers. This kind of technology really could bring a new look and more freedom
to web design.

I know it says that it is mainly for smaller blacks of text. Do you think the reason for that is that
body type may take too long to render?

I suppose that if this method is used, it would be best to use a typeface with similar proportions to
that of a web-safe font so that if it does revert back to the web-safe font, their won't be any serious
typographic changes that would mess with the layout.

Edit: I found the answer to one of my questions:

from http://forums.xisto.com/no_longer_exists/

Loading speed
The rendering speed of the replaced text is an important consideration when using sIFR, and although speeds have been significantly increased since early versions, there can still be a distinct delay if there are many instances of sIFR on screen at one time. This is perhaps the best example of why using sIFR in moderation (ie. one headline per page, or headline per post) is currently the ideal way to use the technique.

This is one of the most frustrating drawbacks of using Flash replacement. The temptation when first implementing sIFR is to replace too many elements on the one page. For this to be viable, loading speeds have to be greatly increased; and although a nice nippy server will help you out, the true culprit is the time that the rather bulky Javascript takes to run.

Edited March 2, 2007 by foolakadugie (see edit history)

[pyost 0]

Even though I am not a fan of Flash myself, I must admin that this idea/project is very good. It gives web designer a lot more freedom when choosing what fonts to use. Just like Valkyria said, you see the same fonts all the time - Arial, Verdana, Tahoma, Times New Roman and Trebuchet MS - it has become monotonous. Unfortunately, I don't believe this idea will live, since Xisto is the first place where I see it mentioned. Otherwise, it would be all over the web Nevertheless, thumbs up for the creators!

[closed 0]

This tricks is best for headers and some quoted elements not suited for the whole site text replacement coz it used javascripts and flash which make your site too long load.

And the version 3 is currently in beta, new features and some bug fixes.
link: http://forums.xisto.com/no_longer_exists/