6 ways to use any fonts on your site!


Go beyond web-safe fonts and give a facelift to your site’s typography by using font-replacement techniques. In this post, we take a look at the 6 most popular methods to add any fonts to your web pages.

Fahrner Image Replacement (FIR)

Fahrner Image Replacement (FIR) is a technique that uses CSS’s background-image attribute to replace text on web pages. By hiding the actual text using display: none or visibility: hidden, and overlaying an image, you can use any custom fonts in your headings without comprising any accessibility concerns of screenreaders. While this technique is SEO friendly, the downside is that it will require a lot of CSS coding along with custom images if you have much text to replace. A modern implementation of FIR involves the use of CSS3’s content and require-font function for image replacement.

Facelift Image Replacement (FLIR)

Facelift is a method that uses PHP along with GD library to convert your text into images with updated fonts.  The image is then sent back to your browser using JavaScript and CSS can be used to further style the text.  FLIR works with any font supported by PHP, FreeType and GD library. The advantage of this method is that it is fast and pretty easy to configure for anyone with little PHP skill.  Its major downside is that text rendered via FLIR cannot be selected which kills usability.

Scalable Inman Flash Replacement (sIFR)

Similar to the FLIR technique reviewed above, sIFR uses Flash instead of PHP to render HTML text using font files provided on the web server.  Implementing sIFR can be tricky and requires some knowledge of Flash and JavaScript.  Each time you want to use a custom font, you’ll need to import it to the source .fla file and compiled it to an .swf file. You can use an online generator to automate this process.  sIFR is totally accessible  – text rendered is selectable and it will also return default fonts for non-Flash browsers.

Cufon Font Replacement

Cufon is a font-replacement technique that uses JavaScript and Vector Graphics to write fonts from a TTF, OTF or PFB font file.  To get started, you need to use a propriety JavaScript rendering engine to convert your font file into a vector form – VML for Internet Explorer browsers and HTML5 canvas for browsers supporting HTML5. Once converted, you can simply call the JavaScript rendering function to replace your site typography. The advantages of Cufon over other methods discussed are its speed, ease of use and compatibly with most major browsers.

CSS3 @font-face

CSS3’s @font-face attribute allows designers to specify a link to a custom font which will in turn be downloaded and installed by the browser when the page is rendered.  The problem, however is that different browsers support different font formats – Internet explorer requires .eot, Firefox and Safari support .otf and .ttf while Opera and Chrome require .svg. If you want a truly cross-browser font support, you will need to convert your fonts into several formats.

Google WebFont API

Google WebFont API uses CSS3’s @font-face to add web fonts to your site. Currently limited only 18 different font-families, Google WebFont API provides by far the easiest implementation for custom typography. All you need to do is simply hotlink to their stylesheet link and then call the font in a CSS style.  The major advantage is that by using StyleSheet served from Google’s CDN, you can save a lot of bandwidth and improve your page load speed.

Related Posts:

2 Responses to “6 ways to use any fonts on your site!”

  1. veerendra Says:

    thanks for including my article!

  2. Ahmad Permessur Says:

    I also want to point out that there’s the Web Open File Format (WOFF) that is still being finalized by the World Wide Web Consortium (W3C). WOFF will be an extension to CSS’s @font-face. Once a font is converted to WOFF format, designers will be able to using it using the @font-face attribute. This technique when fully supported, it will be cross browser compliant and there will be no need to convert your fonts in different formats for different browsers. For more information, please check out this article: http://www.webfonts.info/wiki/index.php?title=WOFF

Leave a Comment