Supporting True Type fonts on Web Applications

When you move a desktop application to the web, you might have the requirement of supporting some of the application original "look and feel".

Browsers do not support all true types, but there are alternatives.

There are several font formats and they have varying support see

These approaches are based on the
CSS3 Web fonts which allow Web designers to use fonts that are not installed on the user's computer.

Good examples of web fonts are provided by Google Fonts

Adobe provides Adobe Edge Fonts

Edge Web Fonts is a free service that provides access to a large library of fonts for your website. It’s one of the Edge Tools & Services from Adobe. Use of the service is free and unlimited

Usage is simple:

Add a javascript tag to the <head> of the website html. For example for font Adamina:

<script src="//"></script>

And use these font-family declarations on the website CSS:

font-family: adamina, serif;

You can also convert your fonts. A great options for that is Cufon:

What is Cufón?

Helsinki, Finland-based web guru, Simo Kinnunen developed a solution to web font replacement called Cufón. The solution requires you to convert a standard True Type (TTF), Open Type (OTF), Pointer Font Binary (BFP), or PostScript font file into a proprietary scalable vector graphic (SVG) font format. The SVG file is then converted to vector markup language (VML), which is an application of XML that browsers can use to display (draw) images. Next, the VML is converted to JavaScript Object Notation >(JSON) and JavaScript functions, so that it can be embedded in a web page using a simple script tag As complicated as this sounds, the conversion is automated, making it very easy.

Once converted, Kinnunen’s rendering engines display the VML glyphs (a pictorial form) on the page. >While this is certainly an over simplification, you can think of Cufón as a tool that tells your web >browser how to draw the characters of the font. Ultimately, Cufón allows a web designer to specify >almost any font, allowing for a much broader range of design possibilities.

For a detailed explanation see the full post here