Nov 8, 2009

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

free web hosting
Open Discussion & Free Web Hosting > Computers & Tech > Designing > Web Design and HTML

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

foolakadugie
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: http://www.mikeindustries.com/blog/files/sifr/2.0/ (thanks .:Brian:.) smile.gif
You can read more about it at: http://www.mikeindustries.com/sifr/ and http://usabletype.com/weblog/how-and-when-to-use-sifr/

Here is a description from http://www.mikeindustries.com/sifr/

QUOTE
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://usabletype.com/weblog/how-and-when-to-use-sifr/
QUOTE

* 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.

 

 

 


Comment/Reply (w/o sign-up)

.:Brian:.
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: http://www.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?

Comment/Reply (w/o sign-up)

Mark420
I must say I am VERY impressed by this!! The graphic designer I work with is going to have a mental breakdown over this wink.gif
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 wink.gif

Thanks a lot for posting this up!!
Marky;)

Comment/Reply (w/o sign-up)

Valkyria
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.

Comment/Reply (w/o sign-up)

foolakadugie
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://usabletype.com/weblog/how-and-when-to-use-sifr/
QUOTE
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.

 

 

 


Comment/Reply (w/o sign-up)

pyost
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 Astahost is the first place where I see it mentioned. Otherwise, it would be all over the web wink.gif Nevertheless, thumbs up for the creators!

Comment/Reply (w/o sign-up)

closed
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://novemberborn.net/sifr3/look-into-the-future

Comment/Reply (w/o sign-up)


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : sifr, 2, 0, system, embedding, web, safe, fonts,

  1. Embedding PSD Files Into Dreamweaver
    Embedding PSD files into Dreamweaver (8)
  2. Embeding Font Files
    How To Embed Fonts To Your Site (1)
    A lot of web designers run into the same problem of wanting a certain font type, but the question
    comes up "How do I guarentee the font to show up without the viewer's computer to install the
    font on the computer?" it's easy, just follow these steps. The first thing you have to do is
    download and install Weft 3 from microsoft, it's free, the download link is on that page. the
    easiest way you can embed a font is by using the wizard and follow the steps commanded to you.
    Easy, but what if you really want to know how the program works, or don't want to....
  3. Fonts
    Can someone help me please! (11)
    I have made a website, and at the top of the page I have a title. I've used a font only found on
    Microsoft Office, and when I view it with a different computer, it doesn't show it as the same
    font! How do I make it viewable to people who don't have office? /huh.gif' border='0'
    style='vertical-align:middle' alt='huh.gif' /> ....
  4. Embedding Ads in Forums
    (4)
    I have always wondered how you can place ads inside that of a phpbb forum. There are no locations to
    place the ad coding into the admin section, so you must have to place the code inside one of the php
    forum files. Can anyone please tell me what file I need to edit and where in the file I have to add
    the coding. Thanks....
  5. Embedding XML into HTML
    (2)
    Hi, I am looking for a way to embed external rss/xml files into my html page, how/is this possible?....

    1. Looking for sifr, 2, 0, system, embedding, web, safe, fonts,

See Also,

*SIMILAR VIDEOS*
Searching Video's for sifr, 2, 0, system, embedding, web, safe, fonts,
advertisement



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

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com