Web Fonts - Why Haven't I Heard About This Before?

Most of the web only uses selective number of fonts, such as: Arial, Verdana, Sans, Times New Romans. But, what if we want to display certain text with certain fonts other than those - to convey some emotion maybe, or to portray certain values, etc? Are we stuck with those selective fonts?

It's true we can make the text to be bold, underlined, italics, etc. But I want to use "waiting for the sunrise" as my font type instead of "Verdana"! This is not easy to achieve because of several reasons:

1. We are putting stuff on the web, so if the machine where the browser is running has the font that we want, it will display it. What if it doesn't? Then it will revert to the "default" font. 
2. All machines or computers have those basic selective fonts - that is why people are mostly sticking with them, so they can be sure that whatever they put on the web will be displayed as intended on the browser.
3. So far people have been working around this by using images - so if I want a menu or a logo with some font type that is not among the standard, I can make it an image using my image editor and include that in my web site as an asset/image file. This then ensures that it will preserve my intended design of the logo or menu or whatever. 
4. But of course, making everything an image is a pain. It's hard to modify, it is not searchable by default, people cannot select/highlight from it, and it's bandwidth consuming. But we kinda stuck with it. 

Aren't there any other alternatives? 

Yes, there is. Web Fonts enable us to use fonts that are not the standard web-safe fonts. In fact this technology is available since IE version 4 - back in late 90s! But only recently, Web Fonts starts gaining traction again, because of its adoption in CSS 3. So via CSS, you can make it download certain fonts and use it. But this is quite cumbersome - it makes your CSS file becomes so much complicated and mixed with code. Or what if the font you want to use is not free and licensed? Do you want to go through the hassle of reading all the EULA or the licensing? Probably not.

Google released Google Web Fonts Beta last year and it has simplify the use of Web Fonts to basically 1 line of code and using your CSS just like before (clean and without all the code clutter).

Here is an example:
This text is not an image, but displayed using a free Web Font called "Waiting for the sunrise".
I can also make it bigger using style.
I can also make bold.

As you can see, the sentence above remains as text, therefore it is searchable by default, it is also highlight-able, can be modified easily like any other text, its style can be customized easily in the CSS file, etc.

So how did I do that? Easy:

1. Go to Google Web Fonts Beta - http://www.google.com/webfonts and pick your font, click it.
2. Click on the "Use this font" tab
3. You should see an HTML for linking a Google API call for the font. Copy that line and put it within your head tag/element.
4. Modify your CSS file to use the font you pick. There is an example on how to do that within the same page. 
5. That's it. One line of code. 

Some additional readings about Web Fonts:

• Web Typography
• Google I/O 2011 Session about Web Fonts