CODEWITHSUNDEEP
javascripthtmlfontscanvas
Chris
Chris

Reputation: 27384

Custom web fonts

I believe the website http://www.habitat.co.uk/ uses a system of replacing text with canvas elements so that custom fonts can be rendered.

Can anyone help me figure out how they do it?

Upvotes: 1

Views: 523

Answers (2)

Diablo
Diablo

Reputation: 3418

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;
}

Upvotes: 2

Christophe
Christophe

Reputation: 4828

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.

Upvotes: 2

Related Questions