Professional and Affordable Web Design

0800 080 5401

Using any font on a website

How many times, during a website development, you have asked yourself – how can I use this font on my website? You probably had this kind of choice:

1. Use 10-15 standard fonts that are accessible worldwide
2. Slice out all headers and buttons in Photoshop and put them on your website as an image.

We can choose limited creativity or additional work during the website modifications.

These choices are definitely unsatisfying in the 21th Century. We are still waiting for the CSS3 @font-face to be implemented in mainstream browsers. Currently, only Safari has implemented @font-face and is able to show any TrueType (.ttf) or OpenType (.otf) font on its pages.

For now we have a few (better or worse) choices:

1. Scalable Inman Flash Replacement (sIFR)
2. Facelift Image Replacement (FLIR)
3. Typeface.js – open source JavaScript library
4. Cufón – JavaScript font replacement

We have to compare above techniques to choose the best one.

SIFR (Scalable Inman Flash Replacement)

Scalable Inman flash replacement exampleScalable Inman flash replacement example

SIFR (Scalable Inman Flash Replacement) is an open source, JavaScript and Flash implementation of web fonts. Like other mentioned techniques it allows the replacement of HTML/XHTML text elements with Flash objects.

Here are some sIFR details:
Size: 29 KB (compressed)
Supported browsers: All browsers supporting JavaScript and Adobe Flash technology
Supported font file types: TTF
Font styling: font-size, color, font-style, font-weight, line-height, text-shadow
Selectable text: Yes

Comparing sIFR to the other solutions mentioned in this article, it has one big advantage – the ability to select the text. SIFR also helps us not to violate fonts EULA – the font is contained in SWF file.

Unfortunately, sIFR is quite slow and shouldn't be used for regular text – only for headlines. It also requires that visitors have JavaScript and the Adobe Flash plug-in enabled in their browsers.

FLIR (Facelift Image Replacement)

Facelift image replacement exampleFacelift image replacement example

FLIR (Facelift Image Replacement) is an image replacement script that uses both PHP and JavaScript for its purpose. FLIR JavaScript searches for the HTML DOM elements that need to be updated, sends the relevant data to PHP script, and replaces the text elements with the resulted image.

Here are some FLIR details:
Size: 33 KB (uncompressed)
Supported browsers: All browsers supporting JavaScript
Supported font file types: TTF
Font styling: font-size, color, font-style, font-weight, line-height (using cLine equivalent)
Selectable text: No

FLIR's main advantage is that the font used in text replacement is served as an image so it doesn't break the font EULA. It also prints correctly (fonts are displayed as images). Unfortunately, FLIR text is not selectable - and it needs PHP with GD enabled on the server side.

Typeface.js and Cufon JavaScript libraries

Cufon font replacement exampleCufon font replacement example

Typeface.js and Cufón JavaScript libraries. I will treat this libraries as one because there are only slight differences in a way they work. Both JavaScript libraries use fonts converted to internal format and displayed using canvas or VML.

Here are some Typeface.js details:
Size: 17 KB (uncompressed)
Supported browsers: Firefox 1.5+, Safari 2+, and Internet Explorer 6, 7 not 8
Supported font file types: TTF
Font styling: font-size, font-style, font-weight, font-stretch, letter-spacing, line-height
Selectable text: No (not yet)

And Cufon details:
Size: 15 KB (compressed)
Supported browsers: Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome and Internet Explorer6+
Supported font file types: TTF, OTF, PFB, POSTSCRIPT
Font styling: font-size, font-style, font-weight, line-height, text-shadow, color
Selectable text: No (not yet)

As we can see, there are some differences between Typeface.js and Cufón. Cufón is working on many browsers, makes it possible to convert more font formats, and support a font “color” property.

Both JavaScript libraries are faster compared to sIFR due to the lack of Adobe Flash technology.
They also doesn't need PHP on the server side. There are however some cons – replaced text can't be selected and font embedding usually violates a font's EULA.

Which solution is for you?

So which solution you should choose? There's no simple answer. You should choose the one that best suits your needs.

Comments0 Comments

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of website

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of website

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »