Web Fonts using sIFR
sIFR is a development package that uses JavaScript and Flash to load custom font characters onto a web page.
Fonts characters are placed into a movie clip in a Flash file then exported as a .swf. JavaScript then loads the Flash file, replacing text on the web page with the movie clip.
Advantages of Using sIFR
sIFR displays text better than text as images because it uses Flash movies instead of jpeg files. The obvious benefit of using sIFR is the ability to use fonts that other users don't have. This allows for a wider variety of type styles than using simple css. sIFR text can be used on any HTML element but there have been bugs when used with links.
Disdvantages of Using sIFR
Because sIFR uses Flash, web pages take longer to load than they would otherwise. Web designers should be careful about placing too many instances of sIFR on one page as it affects load time. siFR uses Flash and JavaScript so if your users don't have Flash and/or JavaScript enabled, the content won't load. A way to work around this issue would be to add content into a noscripttag.
Implementing sIFR
sIFR can be downloaded in several formats: as a jQuery plugin at jQuery sIFR, from the source code at Novemberborn, or as a software package for Mac or Windows. The following video shows you how to download and implement your own sIFR text.
Displaying Fonts by Importing
Web designers can use CSS to show custom fonts on their web pages. CSS imports the actual font file into the user's browser to display the styled text. This is done, however, without the user's knowledge or permission. In some cases, security settings could keep the font file from loading. One way to work around this is to set a default font style after the import style. The process is as follows:
First import the font file into the site directory. In the external or embedded stylesheet place this code from the W3C:
@import url("path/to/YourFont.otf");
h1 {font: YourFont, Verdana, Geneva;};
The CSS3 implementation uses fontface:
@font-face {
font-family: "YourFont";
src: url(path/to/YourFont.otf);
}