Using Non-Standard Fonts – Solutions and Issues

One of the more challenging obstacles in website design are the limits imposed on designers by the idea of “web fonts”.  Web fonts are the few type faces which are installed on every system globally.  To maintain a consistent look to all users, most designers will stick to using those few fonts (Verdana, Arial, Times, Georgia, and Palatino are most common) or use images to replace headers.  This former solution causes a very stale, plain look that users see on every website they visit.  The latter can seriously hurt your search engine rankings.  Neither of those sound very appealing!

Innovative and curious as the developers are Pro Web Marketing are, we’ve found several alternatives that can avoid the downsides of traditional solutions.

Fahrner Image Replacement

Fahrner Image Replacement is a technique that was originally thought up by Todd Fahrner, but it is simple and obvious enough that many other designers and developers have thought of it on their own (Us included!)  The idea is that you may use CSS (Cascading Style Sheets) to “Hide” the heading, and superimpose the graphic version of that text over it.  This is good for basic header replacement, but it requires a lot of manual work.   The text is also impossible to “copy” for an end-user, which is bad for accessibility.

…Read more about FIR

(Scalable) Inman Flash Replacement (sIFR)

sIFR is a technique which uses Adobe’s Flash Player to replace text with a dynamic flash layer automatically.  It utilizes Flash, JavaScript, and CSS to create what is probably the most full-featured option to show your fonts in their full glory.  The only downsides?  It is a real pain to set up, and it requires that your users have a modern version of the flash player.  It can also cause havoc on slower PCs!

…Read more about sIFR

Cufon – My personal favorite!

Cufon is a project designed to replace sIFR.  It uses JavaScript and a custom “Generator” to create a script directly from your font.  All you have to do is generate the script, include it, and deploy it at specified selector tags (headings, etc).

Cufon works in all major browsers and does not interfere with any text interaction such as copying and pasting, and even allows for perfect search engine spidering.

Check it out here

Looking to the future – CSS3 and Modern Browsers

CSS3 includes the “@font-face” property as part of its specification.  This will allow developers to specify which font they want to use by uploading a copy of it to their server.  The code will work like this:

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];

Once all major browser vendors have implemented this into their specification, this technique will become more popular.  Learn more about the spec here.


Using non-standard fonts still requires a bit of extra work at this point, and all of these techniques should only be used sparingly.  Your pages main body text should still be a web-standard font, for most cases.

One Response to “Using Non-Standard Fonts – Solutions and Issues”

  1. […] a previous article about fonts and web standards, we discussed the problems designers face with fonts on the web and some various solutions. […]

Leave a Reply

Captcha * Time limit is exhausted. Please reload CAPTCHA.