Even nowadays it's an issue how to embed custom fonts in webpages. CSS3 allows us to define @font-face, but unfortunatelly this is not a cross-browser solution. Our advice is Typekit.com.

Other solutions are also available, like Cufon or typeface-js, which uses the HTML5 canvas element to render fonts. Basically it searches through the DOM tree and verifies which elements use a particular font. These texts are replaced with the exact copy of the text (color, font size, style, etc.) the only difference is that it is drawn. The biggest drawback of this solution is that we can't modify the text on the fly or we can not use the ":hover" on links.

When Typekit.com comes into the picture, these problems dissapear. So how can you use Typekit.com?

1. Register an account at Typekit.com

2. Choose which fonts you want to use. You can do this with Typekit Editor:

3. When everything is configured, you get a Javascript file, which does the work for you. All you have to do to include this file:

<script type="text/javascript" src="http://use.typekit.com/xxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

Used images:

http://renzgfx.deviantart.com/art/Puzzle-Series-Everywhere-168227819

https://typekit.com/tour/control