All existing technologies of embedding custom fonts may be classified into three major methods:
- Substitution of source text by flash movie or graphic image.
- Font is converted into some intermediate format, then JavaScript is used for rendering.
- CSS @font-face technology.
Here are some specific services for rendering custom fonts that work via substitution of source text by Flash movie or graphic image:
sIFR (Scalable Inman Flash Replacement)
sIFR uses Flash technology to render the desired font. This is an open-source typography solution that anyone can use, free of charge. First, the developer embeds a font into the source .fla file and generates a flash movie. Then, the original text element on the webpage is replaced with this flash movie using JavaScript. It will end up having the same position and dimensions as the original element.
Advantages: fast; small size of generated flash movies; user can copy replaced text.
Drawbacks: requires installed Flash-plugin in bowser; developer should use Adobe Flash to prepare flash movies.
http://www.wikipedia.org/wiki/Sifr
FLIR (FaceLift Image Replacement)
This technology does not require flash and is using server-side php scripts to dynamically generate image representation of text on the webpage. Then this text is automatically replaced with generated image via JavaScript. FLIR is free of charge.
Advantages: no font conversion is needed, supports both .ttf (Tru Type Font) and .otf (Open Type Font) fonts. FLIR is easier to implement than sIFR, its main competitor. FLIR will work for those that don’t have flash whereas sIFR will not.
Drawbacks: very resource heavy and slow in rendering; requires both server-side and client-side setup, and the user can’t copy replaced text.
Here are some specific services for rendering custom fonts that work by converting a given font into some intermediate format, then using JavaScript to customize:
Cufón
Technically this is an analog of typeface.js. Original font should be also converted to some intermediate format. Then it is rendered by JavaScript engine. Like typeface.js, it does not use Flash, rather a combination of <canvas> and <VML> to render the fonts.
Advantages: same as for typeface.js, plus it works faster and has smaller size of converted files. Again, usability is a lot simpler than sIFR.
Drawbacks: user cannot copy replaced text.
http://cufon.shoqolate.com/generate/
Here are some specific services for rendering custom fonts using CSS @font-face technology
@font-face Kit Generator
This is a free service. The developer just uploads custom fonts and agrees that the uploaded fonts are legally eligible for web embedding. Then he or she may choose converted formats and even some additional font settings. Finally this service generates CSS code required for embedding. All that you need to do is just copy and paste this code into your .css file and put the converted fonts on the server.
http://www.fontsquirrel.com/fontface/generator
Typekit
This service essentially does all the work for you. The only thing that you need to do is choose the specific fonts that you’d like to use from their library of fonts and embed JavaScript into the webpage. A big drawback of this service is that it is not free of charge. Also, you can’t use your own font, you can only choose from the select few that are available in it’s library.
Google Font API (Application Programming Interface)
Google now also has its own interface for embedding custom fonts into a webpage. It is completely free, works in most browsers and is easy to use. The biggest drawback is the same as Typekit: you may choose font only from the Google font directory (http://www.google.com/fonts). All fonts are available under an open source license.
https://developers.google.com/fonts/
CSS @font-face is a cross-browser font-embedding technology which was introduced in 1998, however it hasn’t really come into play until recently. It wasn’t considered a viable option because different browsers wouldn’t support different font types. For example Firefox supports .ttf (Tru Type Font) and Internet Explorer supports .otf (Open Type Font) etc. However, in October 2009, Mozilla announced support of WOFF (Web Open Font Format). It essentially acts as a container for .ttf and .otf and was specifically developed for web-developers. Now, all the major browsers including Firefox, Internet Explorer, Opera, Safari and Chrome, support this property.
This has led CSS technology of embedding custom fonts to become one of the most impressive, not only because it’s cross-browser, but also because it’s easy to setup, doesn’t require additional plug-ins or JavaScript and works fast. Also, rendered text can be copied and is easily indexed by search engines.
The one thing to remember about rendered text is that sometimes it might look inaccurate or fuzzy on Windows, although it looks fine on MAC. This happens because Apple and Microsoft use different algorithms for font rendering on the screen. Windows system custom fonts always look fine if they are optimized for “ClearType” rendering technology, developed by Microsoft. If not, their look may vary from fairly good to fairly ugly.