Custom web fonts

I believe the website http://www.habitat.co.uk/ uses a sys开发者_开发技巧tem of replacing text with canvas elements so that custom fonts can be rendered.

Can anyone help me figure out how they do it?

When looking at the source code you can see they used cufon font replacement to do this.

http://cufon.shoqolate.com/generate/

Here is a good tutorial that will get you started -> http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/

You have also other methods like @font-face which in my opinion is much easier to implement.

They are using @font-face, and this is actual css from http://www.habitat.co.uk/

@font-face{
    font-family:'DINHabitatBold';
    src:url('dinhabbd-webfont.eot');
    src:local('?'),url('dinhabbd-webfont.woff') format('woff'),url('dinhabbd-webfont.ttf') format('truetype'),url('dinhabbd-webfont.svg#webfontuqLLqO9I') format('svg');
    font-weight:normal;
    font-style:normal;
}