Technologies of embedding custom fonts into the web-page
All existing technologies of embedding custom fonts may be classified into three major methods:
- Substitution of source text by flash movie or graphic image.
- 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)
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.
FLIR (FaceLift Image Replacement)
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.
<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.
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.
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.
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.
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.