Typography is one of the important weapon for the designer to use, but when it comes to web, a designer is restricted with web-safe fonts only, because a font is an operating system resource, not a browser resource. You can see any font in your browser, which is installed in your machine. But if your visitors don’t have the same font installed, their browser will display default font. So, a designer is at the mercy of the user’s browser when the page is displayed.

Let’s go beyond web-safe fonts

There are number of font-replacement techniques. I would personally recommend for @font-face as it can be used with CSS only. There is not any dependency of plug-in or scripting.  So, in this post I will detail out only @font-face technique. You can read small description of many font replacement techniques or directly jump to @font-face technique.

FIR – Fahrner Image Replacement

It uses the background-image to replace text on web pages and hides the actual text using display:none or visibility: hidden and overlay an image.

http://www.alistapart.com/articles/fir/

Facelift

It uses PHP along with GD library to convert the text into images and the images are then sent back to browser using JavaScript and CSS. Its major downside, if text rendered via FLIR cannot be selected.

http://facelift.mawhorter.net/

http://wordpress.org/extend/plugins/facelift-image-replacement/

sIFR – Scalable Inman Flash Replacement

It is similar to FLIR technique, but uses Flash instead of PHP to render HTML text.  User sIFR can be tricky and requires some knowledge of Flash and JavaScript.

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-implement-sifr3-into-your-website/

http://jquery.thewikies.com/sifr/

http://www.isarie.com/?p=17

Cufon

It uses JavScript and Vector Graphics to write fonts. You need to use propriety JavaScript rendering engine to convert your font file into vector form then you can simply call the JavaScript rendering function to replace your site typography.

http://cufon.shoqolate.com/generate/

http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/

Google WebFont API

It uses CSS3’s @font-face to add web fonts to your site. Currently it is limited to only 18 different font-families.  It is simple to use, you only need to do is simply hotlink to their style sheet link and call the font in CSS.

http://sixrevisions.com/web_design/google-font-api-guide/

http://code.google.com/webfonts

List of font-replacement technique is long – let’s stick with one of the simple/good technique in details.

@font-face

This attribute allows the designers to specify a link to a custom font, which can be in your web server. It will be installed by the browser when the page is rendered. One problem with this technique is different browsers support different font formats.

Internet Explorer – .eot

Firefox and Safari – .otf and .ttf

Opera and Chrome – .svg

If you want cross browser font support, you will need the fonts in several formats.

Let’s create different browser support font formats.

Search any free downloadable font in your machine, before using it for commercial use do some research on that font first as some designer don’t allow their fonts to be embedded. Please respect the designer’s wishes to avoid any potential copyrights problem. In order provide different browser support you can use @font-face Kit Generator. It’s very simple just click the “Add Fonts” and upload the font with all its weights.  Now you are done will all the required font formats.

Now use these font formats for different browser using CSS only

@font-face {
font-family: coronet-webfont;
src: url(' coronet-webfont.eot'); /* IE9 Compatibility Modes */
src: url('coronet-webfont.eot?') format('eot'),  /* IE6-IE8 */
url('coronet-webfont.woff') format('woff'), /* Modern Browsers */
url('coronet-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
url('coronet-webfont.svg#webfontc3BK2Qa1') format('svg'); /* Legacy iOS */
}

Concise steps to Use @font-face for custom fonts in web.

1. Download/purchase any font for your web.
2. Convert it in different format for browser compatibility.
3. Use it with css only as given above.

Download Demo

Some Useful Resources

• http://www.fontsquirrel.com/fontface/generator
• http://onlinefontconverter.com/
• http://james.gameover.com/index.php/2010/css3-font-face-browser-support-table/
• http://www.v-render.co.in/2010/02/24/using-css3-font-face-property/