Beautiful typography for the web

There are already many websites that have began using custom web fonts using @font-face to beautify their website.

getfinch.com
Bringing custom fonts to the web increases the range of possibilities for web designers, however it can also be a drawback, if the fonts aren't used carefully.
Firstly, novice designer may try to use too many different typefaces on a single website, which can become distracting and disconnecting. It is important to realize when too much is too much. As a general rule, when designing a website I never use more than three fonts. Usually I select a font font the headlines and another for the content. If required I add a third font for lower level headlines, however I prefer to use different alternations of the same font.
Secondly, by using too many custom fonts, the size of the website increases. Custom web fonts have the drawback of their size. Using three to five custom fonts on a website can increase its weight by about 0.5MB which is not negligible even on broadband connections. An increased load-time reduces the user experience, and may result in a loss of returning users. And we certainly don't want to implement a loader for static, textual websites, for the sake of nicer design.
Enough nonsense and warnings, you probably just want to know how to add beautiful fonts on your site.
As stated in the first paragraph, custom web fonts can be added to a website using CSS3's @font-face.

@font-face {  font-family: Harmless; src: url('Harmless-serif.otf'); }  @font-face {  font-family: Harmless;  font-weight: bold;  src: url('Harmless-Bold.otf');  }

The loaded font can now be called using font-familly:

h1{ font-family:Harmless; }

@font-face works in most modern browsers (Chrome, Firefox, Opera, Safari, IE).
The above snippet would work correctly if there are fonts Harmless-serif.otf and Harmless-Bold.otf on the website hosting server. However, I think it's better to use a custom service specialized at delivering web fonts than hosting the fonts on your own server. These services take care of gzip compression, and many other things. There are many such services, like TypeKit, Fonts.com, Google Font Directory, etc. Most of them offer a free option, but it is often limited in some way or another. For a broader range of features, one has to pay. I have tried TypeKit, Fonts.com and Google Font Directory, but of all three the best free option is the one offered by Google. Their service is of very high quality, free, and since its hosted on Google servers you can be sure that the servers won't be down. The only drawback is that it offers less fonts than the other services, but I have found the offer to be completely sufficient for my needs. To use a custom font from the Google Font Directory, you have to add an additional stylesheet to the website, that specifies which fonts to load.

<link  href="//fonts.googleapis.com/css?family=Rock+Salt:regular" rel="stylesheet" type="text/css" >

The above stylesheet will load the regular variant of the font Rock Salt. Using it is simple. Here is an example:

<style>#fontPreview:  font-family: 'Rock Salt', serif; font-size: 30px; } </style>

And the output will look like this:

Now you know the basics of using custom fonts on the web, and you can try them on your website. Just remember my previous advice: don't exaggerate.