Fonts on the web, typekit, and now CSS3


TypeKitA common request from clients is to use their corporate font on their website, sadly the font isn’t a websafe one so inevitably you have to use an image for the headings and revert to a safe font for body content.

However, there has been a solution for a long time to this issue. By using @font-face in CSS developers have been able to embed fonts into their websites since Internet Explorer 5. The problem with this approach is that the fonts you can embed are few and far between because of licencing issues.

That's where companies Like TypeKit come in. They provide a service that hosts fonts they have licenced so to use any of their fonts in your website all you need to do is added one line of JavaScript.

The future looks allot brighter, with CSS most modern browsers now support WOFF which means you will be able to use any font as long as it’s in WOFF. I used WOFF in this simple project http://www.thewayithink.co.uk/canvas/ basically all you need to do is add a little CSS magic:

@font-face { font-family: HomeSweetHome; src: url('Fonts/homeswee-webfont.woff'); }

You can then use the font in your style sheet like this:

#result { font: 35pt HomeSweetHome, sans-serif; }
Comments (0)

Skip to main content