Use Any Font in a Web Site Design

Times/Times New Roman, Courier/Courier New, and Helvetica or Arial. These are the three core fonts available on all major computer operating systems from Windows 95 through Vista, Mac System 7 through OS X, Solaris to Red Hat Linux. They’re called “Web-safe fonts.” If you want to be sure that the text of a Web site appears the same to the greatest number of visitors, you must set your text in the Web-safe fonts.

Now, if you only care about the user experience of Web surfers with recent operating systems from Microsoft or Apple, the pre-installed font choices expand to include seven more: Georgia, Verdana, Trebuchet MS, Impact, Arial Black, Century Gothic, and Comic Sans MS. For the sake of argument, let’s say your intended audience members have all of these font families installed. You still must set all the text — body copy, headings, tables, captions, footers, navigation links, and so on — in ten type families. More Web sites than stars in the sky and we’re stuck with ten fonts. Yippee.

Solutions… Of Sorts
Web designers have been trying to find a way to use non-standard fonts on the Web since, well, since the Web became publicly and widely accessible in 1994. Several partial solutions and workarounds have been tried: replacing HTML text with graphics, replacing entire Web pages with PDF or Flash, and using CSS font family selectors to inform the browser of a series of font choices. Microsoft even created technology to embed fonts into Web pages; fonts were downloaded to viewers’ computers and used to display the page as the designer intended. Unfortunately, Microsoft walked away from the technology it dubbed “WEFT” long before it could be made useful.

None of these workarounds solves the problem of safely rendering live HTML text in a font other than the expanded Web safe set of ten. sIFR, which stands for Scalable Inman Flash Replacement (after original creator Shaun Inman), combines elements of all the methods I just described, but it’s a more integrated, more elegant solution. In fact, sIFR’s common misnomer — “Scalable Inline Font Replacement” — more clearly communicates its function.

sIFR In Action
sIFR replaces HTML text on the fly with dynamically generated Flash text. In other words: you type plain old HTML text but visitors see Flash text. It works through CSS selectors, such as H1 or class or ID attributes. Setting all H1 headlines on a site to display in Cooper STD Black, for instance, is as simple as inserting a single line of code into your page headers. Best of all, visitors will see Cooper STD Black even if they don’t have that font installed on their computers!

Let’s start with a live example, a site called RailMagnor.com that I designed for a friend. I used sIFR throughout the site to replace various bits of text (mostly headings) with Flash text. Instead of boring Arial or Verdana, RailMagnor.com uses Neo Tech Alt type family for heads, subheads, and so on. Figure 1 shows a page with twelve separate instances of replaced text using four HTML tags.

Figure 1. sIFR enables the use of non-Web safe fonts — Neo Tech Alt and Neo Tech Alt Medium in this case — on this hobby Web site. Click on the image for a larger version.

The page title (white text on green) is plain text wrapped in a standard H1 tag. Beneath it, on grey, is an H2 page subhead. The page content is divided into sections with H3 headings. In the left sidebars, “Contents” and “Project Specifications” are also sIFR-rendered elements using H5 tags as the replacement targets. If you viewed the source of the page, you’d find the page title and subtitle aren’t at all remarkable:
<h1><a href=”http://www.railmagnor.com/swg/decorations/ship-fenris-caller” title=”Vigo Gunship, the Fenris Caller”>Vigo Gunship, the Fenris Caller</a></h1>

<h2>Decorating the Largest and Coolest POB in SWG</h2>

sIFR swaps them with Flash on the client-side at render time. For the minority of Web visitors who cannot render Flash, regular text is displayed instead. More importantly, even replaced, the text is still text and read by the browser and search engines as plain text, which is crucial for accessibility and SEO.

RailMagnor.com is managed by an out-of-the-box WordPress installation. sIFR can be used not only with hard-coded HTML text but also, as in this case, with pages dynamically generated by blog or content management software — without touching the code of the blog or CMS itself. The real code for the WordPress template that generated the above page is equally unremarkable:
<h1><a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h1>
<h2><?php $values = get_post_custom_values(“kicker”); echo $values[0]; ?></h2>

You can find links to other examples of sIFR in action at the end of this article.

Putting sIFR to Work
Four components make sIFR work:

 

    • Text wrapped in HTML tags, such as <h1></h1> or <div class=”pullquote”></div>

 

    • Flash SWF files into which you’ve embedded the font(s) you’d like to use;

 

    • CSS code that associates specific HTML tags with the font(s) you’ve chosen, and;

 

    • Ready-made JavaScripts that perform the HTML text for Flash text inline replacement when the page is rendered.

 

Step 1: Get sIFR
You can download sIFR here. At that link, you’ll find all the available beta builds of version 3.0; download the latest version (Figure 2). If you experience problems with that build, try using an earlier build.

Figure 2. Builds of sIFR 3.0 available for download.

After downloading and extracting the Zip archive to a temporary location on your computer you’ll have the following four subfolders:

 

    1. CSS, which contains print and screen stylesheets required by sIFR.

 

    1. Demo, which includes a sample sIFR page. Note: the demo will not work if you open it directly from harddrive; it only works when loaded from your Web server.

 

    1. Flash, which contains the Flash and ActionScript files used to create new fonts.

 

    1. JS, which contains the compressed JavaScript files that enable sIFR to function. Original source JavaScript files in the Source subdirectory.

 

Step 2: Create a Flash Font
To create fonts for use by sIFR, you need Flash, version MX 2004 or later. For this tutorial, I’ll use Adobe Flash CS3 Professional, but the steps are the same for all versions since MX 2004.

Open the sifr.fla file from the Flash subfolder into Flash. You should see a blank rectangle and two layers (Figure 3).

Figure 3.The sifr.fla file in Adobe Flash CS3 Professional. Click on the image for a larger version.

Using the Selection tool, double-click the white box movie clip to edit it. You’ll see three words of dynamic text in a box — “Bold Italic Normal.” With the text box selected, change the Font field on the Properties panel to a font of your choice. Leave all other properties alone (Figure 4).

Figure 4. After changing the font on the dynamic text box to Moonglow Cond. Click on the image for a larger version.

Publish or export the Flash movie to an SWF file. Save the SWF movie to the sIFR/Flash subfolder and name the file after the font, without spaces — for example: “Moonglow-Cond.swf”.

Use the following settings while leaving all other options at their defaults (Figure 5):

Version: Flash Player 8
Load Order: Bottom Up
ActionScript Version: ActionScript 2.0
Checked Options: Protect from import, Omit trace actions, Permit debugging, Export hidden layers,

Figure 5. Exporting the sIFR font Flash movie.

Close Flash without saving the sifr.fla file. It’s that easy; you’ve just created a sIFR font ready for use on any Web site. Now let’s prepare the Web server.

Step 3: Upload the Files
Because sIFR must be run from a Web server and can’t be executed locally from your hard drive, you have to upload the needed files to the server. Using an FTP client, cPanel, or CMS, create a directory named “sIFR” in the root of your Web server. Set (CHMOD) the permissions on the folder to 755. Upload the /CSS, /Flash, and /JS subfolders into the /sIFR folder on the server.

Step 4: Prepare the HTML
Initializing the sIFR CSS stylesheets and JavaScript from a Web page is simply a matter of copy and paste. In your HTML, PHP, or other page code add the following near the top between <HEAD> and </HEAD>:

<link rel=”stylesheet” href=”http://mysite.com/sIFR/css/sIFR-screen.css” type=”text/css” media=”screen”>


<link rel=”stylesheet” href=”http://mysite.com/sIFR/css/sIFR-print.css” type=”text/css” media=”print”>


<script src=”http://mysite.com/sIFR/js/sifr.js” type=”text/javascript”></script>

Replace http://mysite.com/sIFR/ with your site’s correct domain name and absolute path to the location where you uploaded the sIFR files. Problems with sIFR not working are usually traced back to incorrect paths in these calls.

Step 5: Configure the sIFR Text Style
Please note: When this article was first published, it contained code in the section “Step 5: Configure the sIFR Text Style” that is unusable in some later builds of sIFR Beta 3. The author has since replaced that section with updated cut and paste code needed by the sIFR builds that are current as of May 29, 2008.

Choose which HTML tags or selectors you’d like to replace with sIFR text. For example, you can replace all instances of tags like H1-H6, CODE, LI, or A. You can also specify classes or IDs in standard CSS format (for example, .sIFRHeading or #PageTitle). And you can specify elements or selectors only contained within other elements, such as #Header H1 or #Sidebar .Nav LI.

Once you know what you’d like replace, insert the following code between <HEAD> and </HEAD>, just below the other lines of text code added in the previous step:

<<script type=”text/javascript”>
//<[CDATA[

var MYFONTNAME = {

src: ‘sifr/flash/MYFONTNAME.swf’

};

sIFR.activate(MYFONTNAME);

sIFR.replace(MYFONTNAME, {

selector: ‘h1’

,css: [

‘.sIFR-root { text-align: center; font-weight: bold; text-transform: capitalize; background-color: #cccccc; }’

,’a { text-decoration: none; }’

,’a:link { color: #006666; }’

,’a:hover { color: #ff0000; }’

]

});

//]]>

</script>

If the thought of editing Javascript sends you running, fear not. This one’s easy. Let’s break down the script.

var MYFONTNAME = {
src: ‘sifr/flash/MYFONTNAME.swf’
};

This command defines the variable “MYFONTNAME” as the font SWF file you created earlier. Setting a variable that states once where the SWF is located and what it’s named (that’s the src part) means we can recall that information quickly later on simply by referencing the variable instead of the entire path to the SWF all over again. Naturally, replace “MYFONTNAME” with the name of the font you created (“Moonglow-Cond” in my case), and make sure the path in src correctly points to the location of the SWF on your server.

If you’re using multiple fonts, each one must have its own variable and source entry.

The next line — sIFR.activate(MYFONTNAME); — tells the browser to get ready to use that font, and to download it to the user’s computer. When using multiple fonts you can initialize them all on the same line, which is more efficient than activating and initializing them all separately. Just call each variable name separated by commas and spaces; for instance: sIFR.activate(MYFONTNAME, MYOTHERFONT, YETANOTHERFONT);

Finally, there’s the meat of matter — what do we replace, and how do we style the sIFR Flash text.

sIFR.replace(MYFONTNAME, {

selector: ‘h1’
,css: [
‘.sIFR-root { text-align: center; font-weight: bold; text-transform: capitalize; background-color: #cccccc; }’
,’a { text-decoration: none; }’
,’a:link { color: #006666; }’
,’a:hover { color: #ff0000; }’
]
});

On the first line is the command to replace and your font variable name. Next, selector defines which HTML selector — tag, ID, class, and so on — should be the target of replacement. In this case the selector is the very <h1></h1> common top level heading tag.

Flash supports a subset of CSS styling attributes and can actually inherit most of them from the site’s .CSS file or inline CSS declarations. However, Flash doesn’t inherit certain attributes from the CSS even though sIFR supports them. For example, text-transform, letter-spacing, background-color, and color must be passed through sIFR’s Javascript. For complete details of which attributes are supported natively by Flash and which sIFR fills in, see the link to the sIFR 3 Wiki at the bottom of this article. This actually makes styling of the replacement text easier via familiar CSS style attributes inline like those shown in the example above — all of which are entirely optional, mind you. The critical part is the ,css: [ line and the use of .sIFR-root as the class. Thereafter, enter CSS attributes as you would in a CSS file — semi-colon delineated, using the same terms and rules as CSS. The only exception is that all color codes must be 6-digit hex, as shorthand code is not supported.

After the main options for .sIFR-root you can see that I’ve defined hyperlinks as having no underline (‘a { text-decoration: none; }’) a teal color (‘a:link { color: #006666; }’) when not hovered over and bright red when the user’s mouse is hovering over the link (‘a:hover { color: #ff0000; }’). Figure 6 shows the result of the above code, after filling in the name and location of my real font.

Figure 6. Live sIFR text using the above code.

Need to add another font? Just repeat the process by creating a new variable to point to the second font, and then another replacement and style block below the first. For example:

<script type=”text/javascript”>
//<[CDATA[

var euro2 = {
src: ‘sifr/flash/euro2.swf’
};

var eurostylelt = {
src: ‘sifr/flash/eurostylelt.swf’
};

var eurostileltexd2 = {
src: ‘sifr/flash/eurostileltexd2.swf’
};

var eurostileltexd2bold = {
src: ‘sifr/flash/eurostileltexd2bold.swf’
};

sIFR.activate(euro2, eurostylelt, eurostileltexd2, eurostileltexd2bold);

sIFR.replace(euro2, {
selector: ‘h1’
,css: [
‘.sIFR-root { text-transform: capitalize; color: #143c78; }’
,’a { text-decoration: none; }’
,’a:link { color: #0000ff; }’
,’a:hover { color: #0000ff; }’
]
});

sIFR.replace(eurostylelt, {
selector: ‘.pullquote’
,css:
’em { font-style: normal; color: #1b6ab5; }’
});

sIFR.replace(eurostileltexd2, {
selector: ‘h2’
,css: {
‘.sIFR-root’: { ‘color’: ‘#888888’ }
}
});

sIFR.replace(eurostileltexd2bold, {selector: ‘h3,h4’});

//]]>
</script>

Save your Web pages, upload to the server, and inspect the result in your browser. If everything worked, you — and any visitor with Flash and JavaScript enabled — will see the fonts you selected, not just those chosen by Microsoft and Apple.

Now you’ve learned how to use any font you own in small bits of text — headings, captions, navigation items, and even short paragraph text like block quotes, pull quotes, or what have you — but you wouldn’t want to use this technology to style entire pages of text. Although sIFR is easy to implement, compatible with more than 98.8% of Web-browsing desktop computers in major markets, and degrades gracefully, it isn’t a total solution. The only total solution would be to cease rendering HTML in the client-side browser, using the visitor’s operating system fonts, and begin rendering it on the server. In other words: throw out HTML and go all Flash or PDF.

In the meantime, sIFR is another technique for your Web design repertoire. This tutorial is sIFR 101 — you can go well beyond what I’ve discussed here. Once you’re comfortable with the basics, explore the information sites and other examples below.

Useful Links:

 

Examples of sIFR in Action:

Pariah S. Burke is a design and publishing workflow expert bringing creative efficiency into studios, agencies, and publications around the world as principal of Workflow:Creative. He is the author of Mastering InDesign CS3 for Print Design and Production (Sybex, 2007) and Illustrator CS2 @Work (Sams, 2005); the former trainer and technical lead for InDesign, InCopy, Illustrator, Photoshop, and Acrobat to Adobe’s own technical support team; a freelance graphic designer with 20 years experience; an accomplished online publisher and WordPress expert; and the publisher of the Web sites Quark VS InDesign.com and Designorati. When not traveling, Pariah lives in Portland, Oregon where he writes (a lot) and creates (many) projects and publications that empower creative professionals.

 

Tags
Posted on: May 28, 2008

12 Comments on Use Any Font in a Web Site Design

  1. after all afternoon trying to get this tutorial working, I’m angered that I cannot figure this out. The source code from the demo/index.html page is far more more advanced and complicated than the code in the above tutorial. This is demoralizing my esteem to graduate to intermediate levels of know-how…. *sigh*.

    –t

  2. At what point do things seem to go wrong?

    Terri Stone

  3. Hi thorg,

    See if the updated code in Step 5 works better. Pariah wrote this how-to several weeks ago, and the builds have changed since then.

    Let me know, OK?

    Terri Stone
    Editor in Chief, CreativePro.com

  4. the sIFR .sef file pushes the div “Guts” down below the left sidebar in Safari & Firefox on a Mac. The subhead of Vigo Gunship ‘Decorating the …” is pushed below the tb shadower in the header, cutting off the botton half of the text, although the header remains on the top of page
    When the page originally loads it’s fine — then there’s a ‘blink’ and the page refreshes with the flash sIFR. That when the div “guts” is pushed below all the sidebars to the bottom of the screen — making it appear that the text and graphics have disappeared.

  5. … but it’s a mess on my MAC on Safari and Firefox. Pity!

  6. Sounds from other comments as if Mac users in particular are having problems making this work. It sounds a great tool, so could we please hear back from posters experiencing problems whether they have found a way through, and/or from Terri/Pariah about any updating of this article to overcome Mac issues.

    “Never underestimate the power of a minority who cherish the vision of a just and gentle world” – Robert Bellah

  7. Hi everyone,

    Pariah will be looking into the issues you’ve reported on. As soon as I have news, I’ll post it here!

    TerriStone
    Editor in Chief, CreativePro.com

  8. Hi, everyone.

    In Safari, FireFox (both Mac and Win), and Camino I see the same problems you’re seeing–the positioning issues “suswelter” described. They aren’t caused by sIFR. Rather they’re caused by the CSS positioning of certain elements (independent of the sIFR Flash objects).

    The site used to detect the client browser and serve a CSS file modified for the specific user agent. Now, though, I don’t see the browser detector running; the code is out of the site templates. I’ve got an e-mail into my friend who uses the site, informing him of the situation. I hope to dig into that site by this coming weekend and have it fixed for FireFox and Safari (again).

    In the meantime, please take a look at my http://www.WorkflowCreative.com. It also uses sIFR (extensively), and is a good example of sIFR working cross browser (it’s also proof that, yes, I really can code for all browsers :-). To see exactly what it’s doing with sIFR, view the page source. You’ll see that nearly all of the graphic-looking text is live sIFR replacements.

    Sincerely,
    Pariah S. Burke

  9. Three months down track I am looking back at this article. I think I understand Pariah’s explanation about why the RailMagnor site is misbehaving in Safari (I note it hasn’t been fixed yet). And certainly WorkflowCreative.com doesn’t display the same problem described by suswelter. But whereas with RailMagnor I can select the HTML text, even though it displays in a specialised font (in the way Pariah is describing in this article), all the special font headings on the WorkflowCreative site appear to be non-HTML (ie graphics). Where exactly is the selectable sIFR text on the WorkflowCreative site?

  10. open website

  11. An alternative to SIFR is fontmeup! works great, and its faster since it doesnt need flash!

Leave a comment

Your email address will not be published.


*