Do you want to use a fancy and unique font for your website or blog title? This seems to be impossible. As we know, when you view a web page, the font for that page are rendered from a font from your computer, if that one is not available, an alternative font will be used. So chances are that most users will probably not have that fancy font installed on their computer so no one will see your texts on pages in fancy font. This is why most web pages you see are in Aria, Times New Roman etc, simply because these fonts are widely available on most computers. However, now by using fonts hosted on a remote server or your own server as well as other additional scripts, you can easily use almost any font on your website.
1 CSS3 @font-face
CSS3’s @font-face attribute allows you to specify a font name and the link to that font in your css file and when a page is loaded, the font will be downloaded and installed by the browser to render texts in that font. This rule supports almost all mainstream browsers, but the problem is not all browsers support all font formats. So you will need to get different formats of that font so that it will be correctly displayed on all browsers. Luckily, there is a free tool called @font-face Kit Generator offered by FontSquirrel, which allows you to upload a font and then it will generate all needed formats for embedding purposes.
2 Google Web Fonts API
Google Web Fonts API allows you to easily use hundreds of web optimized fonts to your websites. The process is really easy. You just browse an pick a font you like, specify the style you will use as well as the character sets you want according to your web page languages, then add a short code to your website, which will be used to call font files. The last step is to add the font name to your CSS styles and Google will handle browse-specific issues and anything else. Now Google web fonts host 501 font families including Latin, Cyrillic, Greek, Khmer, Vietnamese etc. Google web fonts are all open source fonts that are legally allowed for web embedding. Another advantage of using Google web fonts API is all files are hosted on Google so you can save your bandwidth and decrease page load time.
3 Cufon
Cufon‘s approach is based on Javascript, which is different approach. You will need to upload two Javascript files to your website. The cufon Javascript file on their website and the font Javascript file which you can get by converting on their website. After that, you will need to reference two Javascript files in your header and finally you can use this font in any part of your website by adding a short code. Cufon is very easy to implement and supports all main browsers but it uses Javascript and the text is not selectable using cufon, which under some circumstances might be actually a good thing though.
4 siFR
siFR is short for Scalable inman Flash Replacement, which uses a Javascript and Flash to render your text in a particular font. The good is that it better protects the font copyrights, since files are embedded in SWF object and hard to access by normal users. The more obvious drawbacks is that it slows page loading as it requires a combination of CSS, Flash and Javascript.
5 Typekit
Typekit is a web font solution via JavaScript. It is simple to implement. You will just need to add two lines in our header to reference Javascript files and then use @font-face attribute to use fonts on your website. The difference between Typekit and Google Web Font API is that Google Web Font API is totally free and Typekit is a paid service. But as a paid service, Typekit offers fonts with more quantity and better quality. It allows you to choose fonts made by some of the world’s best foundries like Adobe, FontFont, Veer etc.
